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: '&nbsp;';
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

1. An item
2. An item
3. Another item
4. A different item
5. Item four
6. etc
7. An itme
8. An item
9. An item
10. An item
11. Another item
12. A different item
13. Item four
14. etc
15. An itme
16. An item
17. An item
18. An item
19. Another item
20. A different item
21. Item four
22. etc
23. An itme
24. An item
25. An item
26. An item
27. Another item
28. A different item
29. Item four
30. etc
31. An itme
32. 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.