float right and left in a div

Discussion in 'CSS' started by julj, Oct 22, 2009.

0
  1. #1
    hi,

    I want to create a simple one line height header container with a navigation menu on the left and and a login/logout on the right. I tried to use floating divs in the container, but the result is not what I expected (some kind of wrapping occurs). The html and css are below.

    Anybody can explain why it does not work?

    thanks

    #wrapper{
    width: 60em;    
    margin: 1.5em auto;
}

#header{
    background-color: #c1c3bf;
}

#nav{    
    float: left;
}

#login{    
    float: right;
}

#content{
    width: 40em;
    float:left;
    background-color: #e2e5e1;
}

#sidebar{
    width: 20em;
    float:right;
    background-color: #a3a5a2;
}

#footer{
    clear:both;
    background-color: #7a7c79;
}
    Code (markup):


    <body >
    <div id="wrapper">        

        <div id="header">

            <div id="nav">
                <a href="/">Home</a>
                <a href="/search/">Search</a>
            </div>
            
            <div id="login">            
                <a href="/login/?next=">Login</a>            
            </div>
            
        </div><!--header-->

        <div id="sidebar">            
        </div><!--sidebar-->

        <div id="content">
        </div><!--content-->

        <div id="footer">
        </div><!--footer-->

    </div><!--wrapper-->

</body>
    HTML:
     
    julj, Oct 22, 2009 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    When you say:

    "but the result is not what I expected (some kind of wrapping occurs)"

    What browser is this in, and what is happening exactly. I can't see no direct problems, other than you need to contain your floats in the header, so you won't see a background colour appearing in the header until you do this.

    You can do this by adding overflow:auto; to the #header.

    Also i'd move the comments like <!--header--> before the </div> rather than after it, because if I remember right from other posts this could trip some sort of IE bug.
     
    wd_2k6, Oct 22, 2009 IP
  3. julj

    julj Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I'm using iceweasel (firefox) 3.0.6.
    Here's what I get:
    Screenshot.jpg

    The sidebar comes between the nav menu and the login/logout.
    Since both the nav menu and the login/logout are in the header container, I would expect the sidebar to stay below...

    Any suggestion?
    thanks
     
    julj, Oct 22, 2009 IP
  4. seomanEP

    seomanEP Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It may be an issue with widths. Try adding a width to #nav and #login
     
    seomanEP, Oct 22, 2009 IP
  5. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Add overflow:auto; to the #header and clear:both; to the #sidebar
     
    wd_2k6, Oct 22, 2009 IP
  6. julj

    julj Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks for your help.
    Meanwhile I've found good explanations there: http://css-tricks.com/all-about-floats/
     
    julj, Oct 22, 2009 IP