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
