Clearing CSS Floats the Smart Way

The Problem
I’ve torn my hair out so many times trying to get CSS floats to clear properly. The problem is that when you have a floated element and a non-floated element in a containing box and the floated element is taller than the non-floated element, the floated element overflows the box, like so:

And normally that pooches out the bottom and would even overrun this text here, except that this paragraph has clear:both. That’s the normal, old fashioned way to do things. It works, but it’s inelegant and sometimes it doesn’t actually work that well.

Alternative Float Solutions

Sometimes, though, that’s an annoying solution and doesn’t really work. There are all kinds of hacks and what-not ranging from Shaun Inman’s absolute position and javascript solution to the clearfix:after solution. It’s giving me a headache, and the latter doesn’t work in the particular problem I encountered today where the containing element had a border, so forcing a clear is a problem and the Inman solution would work, but I really just didn’t want to add the javascript to the Wordpress theme I was fixing up (by the way, aside from that problem, it’s a nice theme called gardenz).

The Smarter, Better Way to Float

So then I stumbled on the slickest way to handle this. It’s an old method, but I had not seen it until recently and I just had to write it here not because it’s news, but so I wouldn’t forget it. It is described much better in the articles I mention in the credits, so if this doesn’t make sense in my disorganized sort of way, go there. Anyway, here it is: overflow: hidden a technique that dates back to at least 2005 and which, furthermore, appears to be based not on some hack, but on actually writing CSS the way the spec intended. The spec on height and ‘auto‘ (overflow being an attribute that effect height) states quite directly:

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.

That comes from a comment by Anne on the post over at 456 Berea. It’s so simple. You just apply this to the element that contains the floated element:

overflow:hidden;
height:1%;


Halleluja! Praise the Lord as only someone who has wasted countless hours on stupid float problems can praise something quite that geeky. Basically, it’s this simple, to take the example above.

A couple of notes: overflow is hidden so that you don’t get scroll bars in IE/Mac which always puts scroll bars in all cases. You need to set a height or a width to get it to work in IE and Opera. I’ve opted to set a height, since a percentage height is meaningless in most circumstances and doesn’t affect the rest of the layout. It’s probably more robust across browsers if you set a width of 100%, but this creates a problem if you are using a standard box model and you have margins, padding and borders.

And now this paragraph is not cleared, but it’s still safe! Hopefully anyway

Credit where credit is due

I basically figured out not one speck of this on my own. This came into the wide wide world through an article by Alex Walker drawing on Paul O’Brien’s wisdom. Further refinements have been offered by Peter-Paul Koch over at quirksmode.org (CSS - Clearing floats). It was also picked up by my old friend Mike Papageorge (Simple Clearing of Floats. Hey Mike - four years later and I finally have three pages up on that ski site I promised) and from there was found by the folks at 456 Berea Street (Simple Clearing of Floats).