title: How can I break a single list into multiple columns semantically?
body: <p>The current approach our site is using to break a single list into multiple columns is to use multiple <code>ul</code>s:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;one&lt;/li&gt;
    &lt;li&gt;two&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
    &lt;li&gt;three&lt;/li&gt;
    &lt;li&gt;four&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This doesn't seem ideal to me, since semantically, it's not two lists, it's one. I've seen a lot of inadequate solutions for multi-columns lists. I'm looking for a solution that:</p>
  
  <ol>
  <li><p>Uses the following markup structure</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;one&lt;/li&gt;
    &lt;li&gt;two&lt;/li&gt;
    &lt;li&gt;three&lt;/li&gt;
    &lt;li&gt;four&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre></li>
  <li><p>Organizes like this:</p>
  
  <pre><code>one    three
  two    four
  </code></pre>
  
  <p>Not this:</p>
  
  <pre><code>one    two
  three  four
  </code></pre></li>
  <li><p>Works without modification if list-length changes, or if items wrap multiple lines.</p></li>
  <li>Uses valid, semantic HTML.</li>
  <li>Works down to IE8.</li>
  </ol>
  
  <p>The ideal solution is CSS only, but I'm open to using jQuery UI or light-weight Javascript. </p>
  
  <p>(PS, <a href="http://jsfiddle.net/brentonstrine/hH53F/" rel="nofollow">here's my CSS attempt</a>, with notable problems.)</p>
  
  <p>Edit: This question is specific to <em>semantic</em> lists. The other supposedly "duplicate" question is regarding <code>&lt;div&gt;</code> elements, which is a different ballgame because additional markup is allowed. No additional markup is allowed between a <code>&lt;ul&gt;</code> and an <code>&lt;li&gt;</code>. This question is focused on <em>semantics</em> which means there is an emphasis on using HTML to indicate with as much detail as possible the meaning of the content.</p>