CSS – Single list with dynamic column wrapping [duplicate] - list

Question

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS: Ways to break list into columns on page?
I was looking for this solution and couldn't find it so I thought I would post what I ended up making.
I was trying to build a single list where after the 5th item the list would wrap and move into another column. This is so it can be super dynamic with how many items the user needs.
Here is the solution I came up with.
li{
position: relative;
line-height: -6px;
}
ol li:nth-child(6) {
margin-top: -90px;
}
ol li:nth-child(-n+5){
margin-left: 0em;
}
ol li:nth-child(n+6){
margin-left: 10em;
}
<ol>
<li>Aloe</li>
<li>Bergamot</li>
<li>Calendula</li>
<li>Damiana</li>
<li>Elderflower</li>
<li>Feverfew</li>
<li>Ginger</li>
<li>Hops</li>
<li>Iris</li>
<li>Juniper</li>
</ol>
Here's the Fiddle: http://jsfiddle.net/im_benton/tHjeJ/
What do you think of my solution??
What is a solution that will work in IE?

Answer 1

Try using the following as #tuff suggested.
ol {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}
http://jsfiddle.net/tHjeJ/6/

Answer 2

Its not that hard if you just want two columns
You could try something like this on your list:
ol{ width:300px;}
li{
width:50%;
float:left;
}​
It would actually wrap equal number of list items in each column if li number divides by column number.
If you want numeration to be like on your picture you could use wrapping divs for each column and then use the start attribute on your list ...it will be something like start="6"