Anne van Kesteren

Super simple clearing floats

Have you ever floated something to a side and wondered why the outer element did not increase its height? That is probably because the outer element had a visible overflow instead of non-visible overflow. When it does have a non-visible overflow (the overflow property does not compute to visible) the height of the element is based on its descendents. The latest available of CSS 2.1 defines it:

In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

So when you set an overflow attribute property with a value of auto to the outer DIV element things will probably work just fine and you will not have to worry about doing it with generated content.

If the previous set of paragraphs sounded like nonsense to you I have a surprise, a little demonstration:

Great, but what about Internet Explorer?

Have fun. (For those few curious people among us. This thought process started this weekend at Simple Clearing of Floats by Roger.)


  1. So when you set an overflow attribute

    You mean overflow property, right?

    Posted by Jim Dabell at

  2. What I'd like to know, is why this is only now becoming common knowledge?

    Posted by hemebond at

  3. Jim, sorry about that. I should get to bed earlier.

    hemebond, I think nobody tried it till now or so or read the specification carefully enough.

    Posted by Anne at

  4. Thanks so much, Anne, for this. I'm sure a lot of developers moving to CSS have had problems with that behavior.

    While trying the technique, I cried victory... too soon. I always test in Opera first and then adapt. I was in for a bad surprise in Firefox.

    I set up an example here: I am not entirely sure if it's my code or if it's a real problem in Firefox.

    Posted by ghola at

  5. I think that is bug 233078.

    Posted by Anne at

  6. I'd take out this...

    div#content {   _height: 1%;   blah blah blah }

    ... and replace it with this, which validates and is slightly more obvious:

    div#content {   blah blah blah }  * html div#content {   height: 1%; }

    BTW congratulations - I'm utterly gobsmacked (amazed) at this; I've been playing with floats for years and I never saw this before. It's so much better than sticking <div style="clear:both"></div> all over my HTML. Thank you!

    (PS XHTML in comments? Weird! I was stuck trying to figure out what's XHTMLish for the <tt> tag in that last paragraph, so I had to use <strong>...)

    Posted by Eric TF Bat at

  7. There is a CODE element suited for that. In fact, I will correct your comment in a minute ;-)

    ghola, I filed a separate bug that describes your problem. Although it looks similar to the one mentioned earlier I think they are different.

    Posted by Anne at

  8. Nice one, this makes coding floats so much simpler!

    But I second Eric's opinion, I too prefer the * html IE-hack for it's greater visibility and validation.

    Posted by Paul at

  9. Anne, it seems even spookier than doubling padding-right. I just tweaked the stylesheet to have non-equal and odd-numbered values for the padding on each side. The resulting "margin" is neither double padding-right, double padding-left, or the addition of the 2. I'm trying to figure it out.

    Anyway it's a very particular combination of elements and CSS that triggers that bug. Setting overflow to auto is still a life-saver in many situations, and I'll be able to eradicate a lot of my shameful hacks.

    Giddy Up!

    Posted by ghola at

  10. So the difference between this and the original test case at Sitepoint is that you hacked for IE?

    Over at my place, Philippe reports that, as simple as this is, it doesn't work everywhere. I wonder if the forums over at Sitepoint, where this was discovered, have more complete test cases on this...

    Goddamn you have a small comment writing window - how about setting a % width on it?

    Posted by Mike P. at

  11. Is no-one concerned about IE/Mac, which correcly implements height?

    I would use /* \*/ * html #content {height:1%} /* */

    Posted by zcorpan at

  12. I would like to point out that Example 002 and Example 003 are not rendered correctly in Opera 7.54u2.

    Posted by Matthew Raymond at

  13. Is no-one concerned about IE/Mac

    Not really...

    Posted by Robin at

  14. I think that using width: 100%; (or indeed any declared value for width except auto) instead of _height: 1%; (or your hack of preference) on your containing element makes this work in Opera 7 and WinIE.

    Opera 6 isn't having it, though.

    Posted by Small Paul at

  15. Indeed, using width:100%; also makes it work in Opera 7.54 as well as Win/IE5+. I think we have a winner here!

    Posted by Tino Zijdel at

  16. The way I usually get around this is to float the container, and set its width to 100% so that nothing wraps around it.

    A floated container expands to surround floated descendants, and that's true cross-browser without any CSS hacks.

    But still, another tool in the box is always welcome, so thanks. :-)

    (The floated container trick isn't mine - it was revealed by either Eric Meyer or Jeffrey Zeldman I think.)

    Posted by Rick at

  17. Opera 7.54 does not work with examples 2 and 3.

    Posted by Stu N. at

  18. I just tried this on a page I'm working on, and Win/IE6 gives a scrollbar.

    Posted by novice at

  19. IE 5.x on Windows renders example 3 incorrectly. I don't think I'll be using this much.

    Posted by Már at

  20. Már and others. You should really read the comments.

    Posted by Anne at

  21. The height variant doesn't seem to work in IE/win with a HTML 4.01 Transitional dtd, but it does with HTML 4 and xhtml.

    Using width instead of height fixes this however

    Posted by Paul at

  22. Wer’s gerne nachmachen möchte, schaut am Besten auf Anne’s Weblog about Markup & Style nach.

    Posted by - was geht? » Probleme mit Overflows bei divs behoben! at

  23. Thanks for this very useful info, Anne! ^_^

    Posted by Laurens Holst at

  24. Anne, thank you very much for journalling about this.

    Posted by Eugene T.S. Wong at

  25. Great! So, Russian note about this available now.

    P.S. Tnx a lot!

    Posted by Maksim Rossomachin at