Bailing Your Boat: Clearing Problem Floats

CSS floats can present some elegant solutions… and some aggravating problems. Most of the problems relate to intelligently clearing a float. What follows are brief descriptions of a few methods for handling the problem. There is nothing new here. Everything here I got from somewhere else where it is described better and in more detail and with better illustrations. This page is just for my reference so I won’t forget and won’t have to keep looking this up because sometimes I go ages without having to deal with this, and then I forget.

If you want to go to the source on this, check out these articles:

• Ed Eliot has a nice summary of various clearing methods as well as a browser support chart for each method. The clearest explanation anywhere.
• Phrogz.net has a nice basic overview on understanding floats, but not as in-depth as some others.
• An old article by CSS guru Eric Meyer has an excellent explanation of the way floats work and perhaps the original explanation of the nested float method. I found this article years ago and then forgot it and had to look it up again. Thus this article where I’ll know where to find it.
• Smashing Magazine has a comprehensive overview of float tips, including the various clearing methods. This article is pretty heavily linked and will get you to a bunch of other resources. Max Design also has a number of CSS float "recipes" (my term).
• Shaun Inman uses absolute positioning and javascript to avoid float idiosyncracies altogether.
• Tony Aslett developed the clearfix:after solution which is also discussed in detail at Position Is Everything. This is broken by IE7 unless you do something to trigger HasLayout.
• Finally, there are several articles from 2005 or so on the overflow:hidden solution. The original idea is actually part of the CSS spec on height and ‘auto‘ and was picked up and publicized 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) who is still waiting patiently for the ski site I announced in 2002, and from there was found by the folks at 456 Berea Street (Simple Clearing of Floats).

Normal Floats

So normally, you want a float to have all subsequent text to flow around it. That’s exactly what you want.

Notice how the text wraps right around the box every so nicely?

Problem Floats

But what happens when the floated box is taller than the non-floated element?

And normally that pooches out the bottom and would even overrun this text here, except that this paragraph has clear:both. I could clear the tall grey paragraph and be done. 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. For example, here’s the problem that got me digging around again. If this looks right, you’re not using IE. You can see some funkiness in IE7, and even more in IE6 if I recall right. Here’s how it looks in your browser and a screenshot of how it looks in IE7:

And the screenshot:

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:


.floatedElement {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: the reason overflow is hidden is so that you don’t get scroll bars in IE/Mac which otherwise adds scroll bars whether there is any overflow or not. 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.

Tagged with: clearfix • CSS • floats • web design

Filed under: Uncategorized

Like this post? Subscribe to my RSS feed and get loads more!