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
  • 295 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by Gangadharbc
Member Avatar for LastMitch

@Behseini

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.