The sun has come out in London and beach lovers like me are all wondering when their next ‘real summer’ will be. Now, when the television turns to Home and Away, we don’t cringe with disgust and hurl a frozen side of lamb through the screen, but scan every frame for evidence of that yellow sand and those rolling waves we miss so much. Which brings me to clearing using CSS.
Let’s take a look at the following snippet:
<ul id="mylist">
<li>I float left!</li>
<li>I float right!</li>
</ul>
We’ve all seen this before. The UL has a background colour or is supposed to clear an adjacent sibling however without a clearing fix, it doesn’t wrap around it’s children or just floats in space like your demented cousin Jonah.
So we implement a clearing fix. Remember this little beauty?
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {height: 1%;}
What a great deal of time it saved us. It bludgeoned those divs down past their floating children like a hunter taming a pack of wild kittens, all while keeping your markup clean and your smugness intact. However if you look at it, it’s a little bloated and, unless you add specific id and classes to the rule, you have to slip in the classname clearfix to all the offending elements in the markup. Boring!
Well forget that. Now you can clear with gay abandon using just two lines of CSS.
#mylist {
overflow:hidden;
}
/* ie6 */
* html #mylist {
height:1%;
}
With any luck you won’t even have to implement the IE6 fix for very long. I usually keep all my IE hacks in a separate style sheet, ready for obliteration when people finally realise that using Internet Explorer 6 is worse than putting a fire out with your armpits.
Good day!
Illustrated Shorts 