SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to clear three left floated divs

    Hi,

    I have a layout with three variable height columns. The background to the whole page (i.e. the div containing the columns) needs to finish beneath the columns. Obviously, because all three are floated, the background is not showing at all. It's a fixed with centered layout.

    The code is like this:

    Code:
    <html>
    <head>
    <style type="text/css">
    #container {
    width: 800px;
    margin: 0 auto
    }
    #main {
    background: #f00;
    }
    #col_1{
    width: 200px;
    }
    #col_2 {
    width: 400px;
    }
    #col_3 {
    width: 200px;
    }
    
    </style>
    </head>
    <body>
    <div id="container">
      <div id="main">
        <div id="col_1">
          Column 1
        </div>
        <div id="col_2">
         Column 2
        </div>
        <div id="col_3">
          Column 3
        </div>
      </div>
    </div>
    </body>
    </html>

    How can I get the background to always show at the correct height? I've tried adding a <div style="clear: both"></div> after col_3, which works in IE7 but not in Firefox.

    Don't want to rearrange the order of the columns in the HTML if possible, nor use Javascript.

    Thanks for any pointers...

  2. #2
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ignore me. Silly mistake - I'd left the clear:both declaration out of the style sheet, so no wonder it wasn't clearning! Doh.


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
  •