An easy CSS recipe for multi-column lists
Here is a CSS recipe to display any ordered or unordered list in multiple columns.
<style>
.fourColumns > li {
min-width: 25%;
float: left;
}
/* This will clear the floating in standards compliant browers... might not work in IE */
.fourColumns:after {
display: block;
content: ' ';
clear: both;
}
</style>
<ol class="fourColumns">
<li>An item </li>
<li>Another item </li>
<li>A different item</li>
<li>Item four </li>
<li>etc </li>
<li>An itme </li>
<li>An item </li>
<li>Another item </li>
<li>A different item</li>
<li>Item four </li>
<li>etc </li>
<li>An itme </li>
<li>An item </li>
<li>Another item </li>
<li>A different item</li>
<li>Item four </li>
<li>etc </li>
<li>An itme </li>
</ol>
That all becomes
- An item
- An item
- Another item
- A different item
- Item four
- etc
- An itme
- An item
- An item
- An item
- Another item
- A different item
- Item four
- etc
- An itme
- An item
- An item
- An item
- Another item
- A different item
- Item four
- etc
- An itme
- An item
- An item
- An item
- Another item
- A different item
- Item four
- etc
- An itme
- An item

Have you tested this in IE6/7? It doesn’t seem to be working in either browser, due to the generated content rule you specified.
Your right of course. Until IE support generated content via CSS, the “:after” and “:before” styles will not display.