Update 21/02/2007:
Getting this problem?
PIE Clearfix works fine in IE7 like this:
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Now simply add:
class="clearfix"
… to the outer div. For the sake of neat markup, you could also just incorporate the above code into your existing rules and/or classes.
Let me finally remind readers in this update that I take absolutely no credit for this clever fix. I wrote my article because it took me a painfully long time to find the original PIE article and I’d hoped that it might just take a few more people to connect the cables and light up the Christmas tree! If you’re here, it worked!
It was hard to find because it’s hard to describe the problem except in the most generic - and therefore most Google-unfriendly - search terms. As a result, I’ve also seen this issue described as “nested div float problems”, “clearing nested floats” and simply “container div won’t float”.
The original article below has more than mere archive value. There are other hacks too, some devastatingly simple, but clearfix is still the one I use almost two years on. It’s something dependable and rock solid in these twilight times for backwards compatibility!
Original article:
I reported some time ago on the clearfix hack: the kludgy solution to nested DIV float problems.
Since then, I went on to make liberal use of this little gem.
As you do, I stumbled across a sickeningly simple alternative today, whilst looking for a solution to a Safari float problem.
This latest wonder is from CSS nut Paul O’Brien, and apparently it’s been around for some time, if fifyfoureleven.com’s report is anything to go by.
Here’s the problem again:
The solution is simply to add overflow:auto to the outer div.
Here’s the before, and here’s the after. Now I haven’t really tested this yet, but these examples seem to suggest that all is definitely well.
My colleague John Goodall said he’d read that the PIE Clearfix solution wouldn’t work in IE7. I haven’t found the item he saw as yet, and it shouldn’t be an issue if IE7 does support (as they say it will) the :after pseudo-selector.
Well, even if PIE Clearfix does break in IE7, here’s a drastically simpler alternative!
ven Jakob Nielsen thinks it’s 
