CSS Floats and Container Height

<edit>
As pointed out by rborn in the comments below a better way is to simple set the container overflow css property to “auto”. This does the job for you and is a bit tidied that the following solution. However, it might still be use to some of you anyway as it describes the clear property in CSS.
</edit>

It’s been a while since I think I’ve learned something new in the CSS world. So I’m glad to have been recently taught something by a friend.

The problem

For simplicities sake, I’ll just discuss DIV’s. When you make a DIV float (DivB) and its inside another DIV (DivA) if DivB has a fixed height and the container, DivA doesn’t it will overflow and DivA will not expand to the height of DivB. Ok, that that was confusing to write, so I can’t imagine what it’s like to read.

Here is an example;

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.         <title>Float Problem</title>
  6.     </head>
  7.     <body>
  8.        
  9.         <style type="text/css">
  10.            
  11.             #container{
  12.                 width: 400px;
  13.                 border: 1px solid red;
  14.             }
  15.            
  16.             .float{
  17.                 float: left;
  18.                 width: 360px;
  19.                 height: 360px;
  20.                 margin: 10px;
  21.                 padding: 10px;
  22.                 border: 1px solid black;
  23.             }
  24.            
  25.         </style>
  26.        
  27.         <div id="container">
  28.             <div class="float"></div>
  29.         </div>
  30.        
  31.     </body>
  32. </html>
  33.  


See it live

The solution

The “clear” property… So what is it?

“This property specifies if an element allows floating elements on its sides. More specifically, the value of this property lists the sides where floating elements are not accepted. With ‘clear’ set to ‘left’, an element will be moved below any floating element on the left side. With ‘clear’ set to ‘none’, floating elements are allowed on all sides.” (http://www.w3.org/TR/CSS1/#clear)

So, here is the fix… Basically, add another DIV inside DivA (the container) and below DivB in the HTML, set the clear property to “both” and it will push the div height down.

Here is the implementation… Firstly add this to the CSS

  1. .floatfix{
  2.     clear: both;
  3. }

And finally change the HTML to this

  1. <div id="container">
  2.     <div class="float"></div>
  3.     <div class="floatfix"></div>
  4. </div>
  5.  


See it live

Easy!
Thanks to Andy (http://www.andrewaitken.com/).

This entry was posted on Tuesday, August 26th, 2008 at 10:55 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 Responses to “CSS Floats and Container Height”

  1. rborn Says:
    August 26th, 2008 at 12:26 pm

    well, a <br clear=”all” /> would do the trick

    or an overflow:auto in css for container….

    another div seems to me like a waste of code…

  2. Dougal Says:
    August 26th, 2008 at 12:35 pm

    I just used the div as an example, but your right it could be with any element. I try to keep the CSS out of the HTML where possible. In a different file even, just in the same file for this example for simplicity.

    I didn’t know about overflow:auto however… I think I like that solution more. Thanks!

  3. Andy Says:
    August 28th, 2008 at 4:39 pm

    The first example actually works in ie6… :(

  4. shanky Says:
    August 29th, 2008 at 6:29 am

    sometimes there are issues with overflow:auto (ie6) in which case overflow:hidden works well. Sometimes even that causes issues.

    The however has always worked without any issues.

    -Shanky

  5. Eugene Efimochkin Says:
    August 29th, 2008 at 8:15 am

    Well, this solutiuon was around the corner for years, and sometimes it is even considered … lame…

    Learn also the “autofix” trick (which deals with :after CSS2 pseudoelement having clear: something) and also “oveflow: hidden” trick (add this style to non-floating container to see the instant magick). These are also old tricks and their advantage is to spare some markup (you might be caught tight inside some ul > li or dl > dt|dd, where excess markup can make your code non-valid). Also note, that instead of clearing div you might have virtually any element (valid for that place) with clear: both. Sometimes it makes sence to add hr or br at the end of container, when div is overkill. And don’t forget that most float techniques are usually not strictly cross-browser ones (IE6 will make you cry), but there are also some cures to these pains.

    There’s a long long way for me to go…

  6. Dougal Says:
    August 29th, 2008 at 11:45 am

    Eugene, I can’t say I’ve had any big problems with IE6 and floats. They are almost always easy to work around. So I don’t really know what your refering too?

    But yeah, as mentioned by me and previous commenters it can be almost any element rather tha a DIV. This was just an example.

  7. CD Smith Says:
    October 9th, 2008 at 8:46 pm

    Thanks for sharing your knowledge with the rest of us….

  8. peperolo Says:
    November 15th, 2008 at 10:58 pm

    Very useful tip, thank you very much.

  9. tdm Says:
    May 15th, 2009 at 7:21 pm

    Works like a charm. Thanks!

  10. Nick Says:
    June 12th, 2009 at 3:23 pm

    I’ve tried several work arounds for this problem. And the fixfloat div was the only thing that fixed it. instant fix. As far as it being a waste of code. I, put my .footer content in it.

    Thank You for the marvelous fix.

Leave a Reply