Member Avatar for Behseini

Hi I have a header div which includes two divs inside as #logo and #social.Please visit this link in JSFIDDLE:
Here
now I have to problem to present the page
1- I would like to position the social div (right div) at the bottom of the header(parent div).can you please let me know how to do it?
2- There is also an issue with the layout which I couldn't figure it out! while the #logo and the #social are positioned inside the #header div but the seem be appear out of div scoop! as you can see id this link they(#logo and the #social) show up on the body are(Red colored). Can you please let me know why this is happening? Thanks

<!DOCTYPE HTML>
<html>
<body>
<div id="header">
    <div class="container">
        <div id="logo">
            <img src="http://images1.wikia.nocookie.net/__cb20101130020153/logopedia/images/9/9e/Google_Earth_logo.png" width="160" height="160">
        </div>
        <div id="social">
            <ul class="social_bookmarks">
                <li class="mail"><a href="#">Send us Mail</a></li>
                <li class="flicker"><a href="#">Follow us on dribbble</a></li>
                <li class="googlep"><a href="#">Follow us on Twitter</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="main" class="clear">
    <div class="container">
                    <img src="http://www.fantom-xp.com/wallpapers/29/Vector_Art_Image.jpg" width="700" height="400">

    </div>
</div>
<div id="footer">
</div>
</body>
</html>




* {
    margin: 0;
    padding: :0;
}

a:link {
    text-decoration: none;
}

body {
    background:red;
}

#header {
    position: relative;
    background: #ccc url(../img/layout/grain.png)!important;
    color: #3F0;
}

#main {
background:yellow;
    padding-top:10px;
}

#footer {
    position: relative;
    padding: 10px 0;
    background: #111 url(../img/layout/grain.png)!important;
    color: #3F0;
}

.container {
    position: relative;
    margin: 0 auto;
    width: 60%;
}
#logo{
float:left;
margin-buttom:5px;    
}
#logo img { max-width: 100%; height: auto; }

#social{
    float:right;

}
.clear
{
clear:both;
}

/*head search forma nd social bookmarks*/

.social_bookmarks{
height:20px;
position: relative;
top:7px;
float:left;
}

.social_bookmarks li{
float:left;
padding:0;
list-style-type:none;
}

.social_bookmarks li a{
float:left;
width:38px;
line-height:38px;
display: block;
text-indent: -9999px;
margin:0 0 0 2px;
outline: none;
padding:0;
opacity:0.3;

}

.social_bookmarks li a:hover{
opacity:0.8;
}

.social_bookmarks .linkedin a{background: transparent url(http://www.freethechildren.com/wp-content/themes/ftc/images/fb.png) 0 0  no-repeat;}
.social_bookmarks .facebook a{background: transparent url(http://www.freethechildren.com/wp-content/themes/ftc/images/fb.png) 0 0  no-repeat;}
.social_bookmarks .flicker a{background: transparent url(http://www.freethechildren.com/wp-content/themes/ftc/images/fb.png) 0 0  no-repeat;}
.social_bookmarks .mail a{background: transparent url(http://www.freethechildren.com/wp-content/themes/ftc/images/fb.png) 0 0  no-repeat;}
.social_bookmarks .googlep a{background: transparent url(http://www.freethechildren.com/wp-content/themes/ftc/images/fb.png) 0 0  no-repeat;}


.nav {
    border: 1px solid #ccc;
    border-width: 1px 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.nav li {
    display: inline;
}

.nav a {
    display: inline-block;
    padding: 10px;
    text-transform: uppercase;
    color: #CCC;
}

@media screen and (min-width:600px) and (max-width:900px) {
    body {
        background-color: blue;
        font: 10px;
    }
}

@media screen and (min-width:320px) and (max-width:480px) {

    body {
        background-color: red;
        font-size: 80%;
    }
}
  • 4 Contributors
  • 3 Replies
  • 313 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by Gangadharbc

Dani AI

Generated

A quick diagnosis: the header looks empty because both inner blocks are floated, so the header’s height collapses and the page background shows through. correctly noticed the body background; ’s absolute-position idea will work but has trade‑offs; is right that removing floats simplifies things. Recommended, modern fix: use flexbox so the logo stays left and the social block sits at the bottom-right while the header naturally wraps its children.

Use flexbox on the header container (remove floats from the two child elements):

#header .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* align children to the bottom of the header */
}
#social { float: none; } /* ensure the social block participates in flex layout */

If you must keep floats (legacy code), make the header contain them by adding a clearfix or using overflow on the parent so it doesn’t collapse:

#header::after {
  content: "";
  display: table;
  clear: both;
}

Fallback/notes: absolute positioning (set the parent position: relative and the social position: absolute; right:0; bottom:0;) places the social block exactly but removes it from flow, so the header needs an explicit height or padding to reserve space. Also fix the small typos in your CSS (for example margin-buttom → margin-bottom) and make logo images display: block to avoid baseline gaps. Quick checklist: remove floats or clear them, prefer flexbox for responsive layouts, or use absolute positioning only when you control the header height.

Recommended Answers

All 3 Replies

Member Avatar for Member #949455

1- I would like to position the social div (right div) at the bottom of the header(parent div).can you please let me know how to do it?

Are you familiar with CSS?

If you want to move the social bookmark to the bottom by moving the div before the footer div.

2- There is also an issue with the layout which I couldn't figure it out! while the #logo and the #social are positioned inside the #header div but the seem be appear out of div scoop! as you can see id this link they(#logo and the #social) show up on the body are(Red colored). Can you please let me know why this is happening? Thanks

The question you just ask is bit confused because you set the body as red:

body {
background:red;
}

Even though (#logo and the #social) you didn't set a background color so the background of your whole website is red and that's why it's surrounded by red.

Member Avatar for JorgeM

1- I would like to position the social div (right div) at the bottom of the header(parent div).can you please let me know how to do it?

One method is to set the parent div's position to relative then set the child div's position to absolute. Then use the left and top CSS properties to place the child div in the exact location of choice.

Member Avatar for Gangadharbc

Remove the float from #logo and #social, It works..!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.