Multi-column lists without using Javascript

This article shows how to display multi-colum ordered and unordered lists using CSS and HTML. This is an example taken from csswizardry.com blog with my small corrections and modification.

First, create list:

[code language=”html”]
<div class="toc multicolumn-ordered">
<h1>Index</h1>
<ol id="six-columns">
<li><a href="#intro">General</a></li>
<li><a href="#button">Button</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
…
</ol>
</div>

<div class="multicolumn-unordered markdown-off">
<ul id="six-columns">
<li><i class="icon-glass"></i> glass</li>
<li><i class="icon-music"></i> music</li>
<li><i class="icon-search"></i> search</li>
<li><i class="icon-envelope"></i> envelope</li>
<li><i class="icon-heart"></i> heart</li>
<li><i class="icon-star"></i> star</li>
…
</ul>
</div>
[/code]

Then prepare related styles.

[code language=”css”]
div.multicolumn-unordered ul
{
width: 760px;
margin-bottom: 20px;
overflow: hidden;
margin: auto;
font-size: 13px;
}

div.multicolumn-unordered li
{
line-height: 2.1em;
float: left;
display: inline;
}

div.multicolumn-ordered li
{
line-height: 2.1em;
float: left;
}

div.multicolumn-unordered ul#two-columns li, div.multicolumn-ordered ol#two-columns li {width: 50%}
div.multicolumn-unordered ul#three-columns li, div.multicolumn-ordered ol#three-columns li {width: 33.333%}
div.multicolumn-unordered ul#four-columns li, div.multicolumn-ordered ol#four-columns li {width: 25%}
div.multicolumn-unordered ul#five-columns li, div.multicolumn-ordered ol#five-columns li {width: 20%}
div.multicolumn-unordered ul#six-columns li, div.multicolumn-ordered ol#six-columns li {width: 16.666%}
[/code]

That should be all.