title: Layout a HTML list in evenly-spaced columns
body: <p>I'd like to lay out a list such as the following in 2/3 evenly spaced columns</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;li&gt;five&lt;li&gt;
    &lt;li&gt;six&lt;li&gt;
    &lt;li&gt;seven&lt;li&gt;
    &lt;li&gt;eight&lt;li&gt;
    &lt;li&gt;nine&lt;li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>One solution is to separate the list into two lists and float one of them right, possibly with a margin, e.g.</p>
  
  <pre><code>  &lt;div id="col2"&gt;
      &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;li&gt;five&lt;li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;ul&gt;
      &lt;li&gt;six&lt;li&gt;
      &lt;li&gt;seven&lt;li&gt;
      &lt;li&gt;eight&lt;li&gt;
      &lt;li&gt;nine&lt;li&gt;
    &lt;/ul&gt;
  
  #col2 {
      float: right;
      margin-right: 450px;
  }
  </code></pre>
  
  <p>This works OK, but has a number of shortcomings:</p>
  
  <ol>
  <li>(Un)semantic markup - it's not really 2 lists, I've split a single list into 2, just to make it easier to style</li>
  <li>The margin must be manually set to something that gives the appearance of being evenly spaced</li>
  <li>If the browser is made sufficiently narrow, the right-hand column will run into the second.</li>
  </ol>
  
  <p>Is there a better way to do this, preferably without using a table?</p>
  
  <hr>
  
  <h2>Update:</h2>
  
  <p>I tried out <a href="http://www.alistapart.com/d/multicolumnlists/example1.html" rel="nofollow noreferrer">Method 1</a>, but I'm seeing some strange results. If you look at this <a href="http://chaletsdesbouleaux.com/activity.shtml#act1" rel="nofollow noreferrer">3-column list</a> on you'll see there are 'holes' in the first 2 columns. Any idea why?</p>