Beyond web logs

Named after its creator, Tony Aslett (www.csscreator.com), the Aslett Clearing Method forces a container such as a div to
enclose floated content nested within it, which it would not normally do. This technique uses the CSS :after pseudo-class
to insert a hidden bit of non-floated content (a period with no height) after all the other content inside that container. The
code also applies clearing to this non-floated content, and the container is thereby forced to enclose it. Here’s the code:
.clearfi x:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfi x {display: inline-table;}
/* backslash hack hides from IE mac \*/
* html .clearfi x {height: 1%;}
.clearfi x {display: block;}
/* end backslash hack */
You can add this code at the end of a style sheet so it’s available to your pages. (I’ve added it to the end of the
text_n_colors.css fi le in the downloads for you.) Then any time you need a container to enclose floated content,
simply add the class clearfi x to the container, like this:
<div class="clearfi x">
and the container will instantly enclose any fl oated content within it. A couple of good uses of this technique are
1. To force a footer to sit below fl oated columns (see Chapter 5 for examples of layouts with floated columns). Add
the clearfi x class to a wrapper div around the columns, and this container will then always expand vertically to
enclose the columns, no matter how long they get. An element such as footer div that follows the closing tag of the
wrapper div in the markup will then always sit below the longest column.
2. To add a border around a number of floated elements. Enclose the floated elements in a wrapper div and add the
clearfi x class to this wrapper so it encloses the floated elements. Then style the border of this containing element.
This is one of those techniques where you don’t know why you would need it until you need it; one day, though, you
will. It sure beats adding lots of clearing divs into your markup and is very simple to use.
Note that IE6 incorrectly causes a div that contains floated elements to enclose those elements, so this is just one more
reason to develop in a standards-compliant browser and test with IE afterwards.
To learn more about the Aslett Clearing Method, check out Position Is Everything (www.positioniseverything.net/easyclearing.html).