title: How to CSS a two column list of items?
body: <p>I need to display a two column list of items according to the following rules:</p>
  
  <ul>
  <li>Container for the columns has fluid width</li>
  <li>Width of both columns needs to be equal</li>
  <li>Items are dynamically rendered and at least one will be displayed</li>
  <li>Item ordering needs to flow down the left column first, then the right</li>
  <li>Items need to line up evenly across the bottom or in the case of an odd number the extra item should show in the left column</li>
  </ul>
  
  <p>Here is an example:</p>
  
  <pre><code>~ Item 1   | ~ Item 6
  ~ Item 2   | ~ Item 7
  ~ Item 3   | ~ Item 8
  ~ Item 4   | ~ Item 9
  ~ Item 5   |
  </code></pre>
  
  <p>The HTML can be anything as long as it solves this problem. I'm restricted to using XSLT to wrap HTML around what the server spits out. I have access to two XSLT parameters: one that tells me the current item number and one that tells me how many items there are.</p>
  
  <p>My CSS skills are basic/intermediate and I don't know where to start here. Any ideas on whether this is achievable and how to do it?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Thanks for the answers. Consensus seems to be either use the <a href="http://www.alistapart.com/articles/multicolumnlists" rel="noreferrer">A List Apart</a> article or a table which I'd prefer as it's simpler. The problem with the table is that the server gives me the items in sorted order. To use a table would mean XSLT trickery to re-sort, wouldn't it?</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;Item 1&lt;/td&gt;
      &lt;td&gt;Item 4&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Item 2&lt;/td&gt;
      &lt;td&gt;Item 5&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Item 3&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>