MikePadgett.com

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!

This item is now out of date. See the updated version.

I recently discovered a CSS hack that has come in very handy indeed since.

The problem arises in both Firefox and IE (though the solution is different for each) when we try to wrap a div around one or more divs with float.

You want your wrapper to stretch vertically with your contained divs, but instead, you find that your wrapper gets behind when your floated content divs go stretching off down the viewport and beyond.

The development community is all but silent on this issue, though I would think it’s a common enough problem to have encountered.

I tried and tested an IE solution, but it was thanks to Big John and Holly at positioniseverything that the NS / Firefox side of things could be cleared up. The full article with the whys and wherefores is here, and the code we need is as follows:

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


Now we get the result we want!