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:

<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>

Then prepare related styles.

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%}

That should be all.

Leave a Reply