title: 1st column in html source displays 1 row below the other columns
body: <p>I am having a standard html source and have a text with regular <code>&lt;ol&gt;</code> list in it that I want to be displayed on the page in 2, 3 or 4 columns for example <strong>(no table to be used)</strong>. When I say in CSS what i want to happen, the text goes into several columns but the 1st column starts 1 row lower than the others. How can I make all columns to be displays on the same starting level? This is the HTML part:</p>
  
  <pre><code>&lt;div id="references"&gt;   
      &lt;ol&gt;
          &lt;li&gt;Some text&lt;/li&gt;
          &lt;li&gt;Some other text&lt;/li&gt;
          &lt;li&gt;And again some text&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the CSS part witch is simply copied from the documentation in <a href="http://www.w3schools.com/cssref/css3_pr_column-width.asp" rel="nofollow">http://www.w3schools.com/cssref/css3_pr_column-width.asp</a>:</p>
  
  <pre><code>#references {
      -webkit-column-width: 30em; /* Chrome, Safari, Opera */
      -moz-column-width: 30em; /* Firefox */
      column-width: 30em;
  }
  </code></pre>