SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    winter is around the corner Tomer's Avatar
    Join Date
    Jul 2005
    Location
    Israel
    Posts
    684
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS float issue.

    Hey, I'm currently redesigning my website to CSS.

    Anyways, I have a header, container which holds two floating divs, content and navigation.

    The general layout is this:

    <div id="container" style="background-url: ('bg.gif');">
    <div style="float: left; width: 100px;">Navigation</div>
    <div style="float: right; width: 700px;">Content</div>
    </div>

    Anyway it looks good on paper, but this is what happens:




    The background doesn't go all the way down and stops at the floating divs.

    Can anyone help? Thanks!

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You haven't cleared your floats!

    Paul explains it better than I could:
    http://www.search-this.com/2007/09/0...ar-about-this/

    The simplest of fixes is to add a clearing div:
    Code:
    <div id="container" style="background-url: ('bg.gif');">
        <div style="float: left; width: 100px;">Navigation</div> 
        <div style="float: right; width: 700px;">Content</div>
        <div style="clear: both"></div>
    </div>
    You should move all you css to an external stylesheet also

  3. #3
    winter is around the corner Tomer's Avatar
    Join Date
    Jul 2005
    Location
    Israel
    Posts
    684
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So simple and so effective. I love ya!

    Thanks a bunch.
    - Tomer


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •