CSS – Single list with dynamic column wrapping [duplicate]

Question

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/