Solution to nested DIV float problems
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!
