title: CSS – Single list with dynamic column wrapping
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/6509106/css-ways-to-break-list-into-columns-on-page">CSS: Ways to break list into columns on page?</a>  </p>
  </blockquote>
  
  
  
  <p>I was looking for this solution and couldn't find it so I thought I would post what I ended up making.</p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/5THAw.png" alt="enter image description here"></p>
  
  <p>Here is the solution I came up with.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> 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;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;ol&gt;
        &lt;li&gt;Aloe&lt;/li&gt;
        &lt;li&gt;Bergamot&lt;/li&gt;
        &lt;li&gt;Calendula&lt;/li&gt;
        &lt;li&gt;Damiana&lt;/li&gt;
        &lt;li&gt;Elderflower&lt;/li&gt;
        &lt;li&gt;Feverfew&lt;/li&gt;
        &lt;li&gt;Ginger&lt;/li&gt;
        &lt;li&gt;Hops&lt;/li&gt;
        &lt;li&gt;Iris&lt;/li&gt;
        &lt;li&gt;Juniper&lt;/li&gt;
   &lt;/ol&gt;
      
      
     </code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's the Fiddle: <a href="http://jsfiddle.net/im_benton/tHjeJ/" rel="nofollow noreferrer">http://jsfiddle.net/im_benton/tHjeJ/</a></p>
  
  <p>What do you think of my solution?? 
  What is a solution that will work in IE?</p>