Multi-Column Lists

A valid, semantic solution to have one list in multiple columns.

by Brenton Strine

HTML

<ul>
    <li>one one one</li>
    <li>two</li>
    <li>three</li>
    <li>four four four</li>
    <li>five five five five</li>
    <li class="newrow">six six</li>
    <li>seven seven</li>
    <li>eight eight eight eight eight eight eight eight eight eight eight eight eight</li>
    <li>nine nine</li>
    <li>ten ten ten ten</li>
</ul>
&lt;-- Adjust width of this box to see how wrapping works.

CSS

li { line-height: 20px; }

/* general sibling selector ("~") works down to IE7 */
.newrow, .newrow ~ li {
    margin-left: 120px;   /* width of column */
    margin-top: -100px;
    margin-bottom: 100px; /* height of column */

/* if you want to indent lines that wrap: */
    text-indent: -20px;
    padding-left: 20px;   /* indentation width */
}