« back to CSS Swag: Styling Multiple-Column Lists

Method 5: Wrapping a single list using absolute positioning

  1. Aloe
  2. Bergamot
  3. Calendula
  4. Damiana
  5. Elderflower
  6. Feverfew
  7. Ginger
  8. Hops
  9. Iris
  10. Juniper
  11. Kava kava
  12. Lavender
  13. Marjoram
  14. Nutmeg
  15. Oregano
  16. Pennyroyal

The above markup should render like this:

Method 5: Wrapping a single list using absolute positioning

Notes:

XHTML:

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

CSS:

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 */
}