HI,
You may use the below code to get the desired result.
-----------------------------------------------------------------
-----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="
http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Method 5: Wrapping a single list using absolute positioning</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
@import "demo.css";
</style>
<style type="text/css">
<!--
/*==============================
style the list
==============================*/
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 */
}
-->
</style>
</head>
<body>
<ol>
<li class="aloe"><a href="#">Aloe</a></li>
<li class="berg"><a href="#">Bergamot</a></li>
<li class="cale"><a href="#">Calendula</a></li>
<li class="dami"><a href="#">Damiana</a></li>
<li class="elde"><a href="#">Elderflower</a></li>
<li class="feve"><a href="#">Feverfew</a></li>
<li class="ging"><a href="#">Ginger</a></li>
<li class="hops"><a href="#">Hops</a></li>
<li class="iris"><a href="#">Iris</a></li>
<li class="juni"><a href="#">Juniper</a></li>
<li class="kava"><a href="#">Kava kava</a></li>
<li class="lave"><a href="#">Lavender</a></li>
<li class="marj"><a href="#">Marjoram</a></li>
<li class="nutm"><a href="#">Nutmeg</a></li>
<li class="oreg"><a href="#">Oregano</a></li>
<li class="penn"><a href="#">Pennyroyal</a></li>
</ol>
<h2>
<!-- .block -->
</h2>
</body>
</html>
----------------------------------------------------------------------------------
--------------------------------------------------------------------------XXX
Hope this helps,
Cheers