« back to CSS Swag: Styling Multiple-Column Lists
<ol ><li class="column1"><a href="#">Aloe</a></li ><li class="column1"><a href="#">Bergamot</a></li ><li class="column1"><a href="#">Calendula</a></li ><li class="column1"><a href="#">Damiana</a></li ><li class="column1"><a href="#">Elderflower</a></li ><li class="column2 reset"><a href="#">Feverfew</a></li ><li class="column2"><a href="#">Ginger</a></li ><li class="column2"><a href="#">Hops</a></li ><li class="column2"><a href="#">Iris</a></li ><li class="column2"><a href="#">Juniper</a></li ><li class="column3 reset"><a href="#">Kava kava</a></li ><li class="column3"><a href="#">Lavender</a></li ><li class="column3"><a href="#">Marjoram</a></li ><li class="column3"><a href="#">Nutmeg</a></li ><li class="column3"><a href="#">Oregano</a></li ><li class="column3"><a href="#">Pennyroyal</a></li ></ol>
/* separate the list from surrounding elements */
ol
{
margin: 0 0 1em 2em;
padding: 0;
}
ol li
{
/* Stipulate the height of each item so that
vertical return = items * height */
line-height: 1.2em;
/* Clear the default margins & padding
so we can style the list from scratch */
margin: 0;
padding: 0;
}
/* If li position is left static, Internet
Explorer disables hyperlinks in the list
in all but the final column.
This rule will be processed only by
Internet Explorer because only IE believes
that there’s a level above HTML: */
* html ol li
{
position: relative;
}
/* horizontal position of each column */
ol li.column1 { margin-left: 0em; }
ol li.column2 { margin-left: 10em; }
ol li.column3 { margin-left: 20em; }
/* Bring the first item of each column
back up to the level of item 1.
Vertical return = items * height.
Here, 5 items * 1.2em line-height = 6em */
li.reset
{
margin-top: -6em;
}
/* anchor styling */
ol li a
{
display: block;
width: 7em;
text-decoration: none;
}
ol li a:hover
{
color: #FFF; /* white */
background-color: #A52A2A; /* brown */
}