Clearing floats in IE7
If you ever needed to use floats in CSS, odds are you needed to clear them at one point. The oldskool way was to add structural markup which would display nothing but still occupy space. Something to the effect of:
<div style="clear: both; height: 1px"> </div>
You could put that style in a class but it’s still far from elegant and you end up with markup with in effect, does nothing at all. And it’s messy. Messy, messy, messy.
Using :before and :after selectors, you can pretty much do the same thing invisibly and you don’t need anymore steenking structural debris. But, this isn’t supported by IE7 and below. Rarrrgh[1].
What you can do for IE I found in this article at Stuff and Nonsense. In summary, in the CSS for the element you want to clear, add:
overflow: hidden;
zoom: 1;
But you’ll need to add the zoom stuff to an IE specific stylesheet, or using conditional statements inline or your CSS won’t validate.
The reason it works is because the zoom attribute triggers some event/attribute called “hasLayout” in IE4+. From this point on, this is voodoo to me, but if you want to know what it does, it’s explained on MSDN.
[1] You can probably tell from the tone and style in which I have written this post that I’m probably going a little crazy… That’s working with IE for you.
