Easy Clearing: Even Bloody Easier Clearing
Posted by Dan Eastwell
One of the biggest banes of today's modern internet is how to clear elements that appear after a floated element.
This has been covered well, within this article on easyclearing from position is everything. However, the solution for firefox is a bit of a hack - you don't need to add an invisible dot after the content.
Now that IE7 has hit the ground running and has better standards support, we can make use of this to solve our problem
What we actually need is a selector that applies to everything immediately after our floated element, or its container. The W3C spec already has this element: the adjacent selector: A + B.
This will apply styling to B, where it is the first sibling of A - in our example the thing that follows our floated element, or its container.
Apply to all
We'd like to have all types of element that follow our floated element to be cleared. There's a CSS selector that allows us to do that: the universal selector *
Thus we have the following code:
div.container + *{
clear:left;
}
What about other browsers?
Now, this is recklessly untested at the moment, but should work in Firefox and IE7. IE6 will still require clearing from the old easyclearing hack ({height: 1%;}), although that would probably be best placed in a conditionally commented file, rather than using the old * html hack.
Edit: This method doesn't appear does seem to work in Safari.
Edit: This method 'causes problems' in IE5.01, so will need to be hacked out in your tweaks file, possibly using this method:
@media all{
* html div#container + * {
clear: none;
}
}
The main point still stands, though, no hack is needed to get clearing in standards compliant browsers and the existing hacks are needed in < standards compliant browsers. Shame about IE5.10 ruining the party for everyone. Again.
