« back to CSS Swag: Styling Multiple-Column Lists
<ol ><li class="aloe">Aloe</a></li ><li class="berg">Bergamot</a></li ><li class="cale">Calendula</a></li ><li class="dami">Damiana</a></li ><li class="elde">Elderflower</a></li ><li class="feve">Feverfew</a></li ><li class="ging">Ginger</a></li ><li class="hops">Hops</a></li ><li class="iris">Iris</a></li ><li class="juni">Juniper</a></li ><li class="kava">Kava kava</a></li ><li class="lave">Lavender</a></li ><li class="marj">Marjoram</a></li ><li class="nutm">Nutmeg</a></li ><li class="oreg">Oregano</a></li ><li class="penn">Pennyroyal</a></li ></ol>
div.listwrap
{
/* provide a point of reference for
absolutely-positioned descendants */
position: relative;
/* prevent subsequent page elements
from rising up into the div */
height: 7.2em;
/* separate from subsequent content */
margin-bottom: 1em;
padding: 0;
}
ol li
{
/* position each item absolutely */
position: absolute;
/* 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;
}
/* horizontal position of each column */
ol li.aloe,
ol li.berg,
ol li.cale,
ol li.dami,
ol li.elde
{
margin-left: 0em;
}
ol li.feve,
ol li.ging,
ol li.hops,
ol li.iris,
ol li.juni
{
margin-left: 10em;
}
ol li.kava,
ol li.lave,
ol li.marj,
ol li.nutm,
ol li.oreg,
ol li.penn
{
margin-left: 20em;
}
/* vertical position of each row */
ol li.aloe,
ol li.feve,
ol li.kava
{
top: 0em;
}
ol li.berg,
ol li.ging,
ol li.lave
{
top: 1.2em;
}
ol li.cale,
ol li.hops,
ol li.marj
{
top: 2.4em;
}
ol li.dami,
ol li.iris,
ol li.nutm
{
top: 3.6em;
}
ol li.elde,
ol li.juni,
ol li.oreg
{
top: 4.8em;
}
ol li.penn
{
top: 6.0em;
}
/* anchor styling */
ol li a
{
display: block;
width: 7em;
text-decoration: none;
}
ol li a:hover
{
color: #FFF; /* white */
background-color: #A52A2A; /* brown */
}