I ran into an issue this weekend with IE7 not clearing my floats correctly. I had a wrapper with a background applied to it and then a content div with floated elements in it. The background was not repeating all the way down the page, and was ending before the content div. I was using my normal methods of clearing floats and of course the page worked fine in Firefox and Safari on the Mac.

After some searching around looking for why this was happening I discovered an article at Position Is Everything that introduced me to a new clearing method which is far more elegant than the solution I was using previously.

You apply the .clearfix class to any div containing a float and its cleared!

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */

Roger Johansson also suggests adding the following code to a <=IE6 specific CSS file in order to make sure it works in earlier browsers.

clearfix {height:1px;}