title: How to make floating DIV list appear in columns, not rows
body: <p>I have a HTML layout puzzle on my hands. I have a large alphabetical list, generated by my PHP app, and I need to output it on a web page. The markup generated look like this:</p>
  
  <pre><code>&lt;div class="list_item"&gt;A&lt;/div&gt;
  &lt;div class="list_item"&gt;B&lt;/div&gt;
  &lt;div class="list_item"&gt;C&lt;/div&gt;
  &lt;div class="list_item"&gt;D&lt;/div&gt;
  &lt;div class="list_item"&gt;E&lt;/div&gt;
  &lt;div class="list_item"&gt;F&lt;/div&gt;
  &lt;div class="list_item"&gt;G&lt;/div&gt;
  &lt;div class="list_item"&gt;H&lt;/div&gt;
  ...
  </code></pre>
  
  <p>The stylesheet looks like this:</p>
  
  <pre><code>.list_item {
      margin: 5px;
      padding: 5px;
      border: 1px solid gray;
  
      width: 200px;
      float: left;
  }
  </code></pre>
  
  <p>Rendered result:</p>
  
  <p><img src="https://i.stack.imgur.com/MPE7G.png" alt="Rendered result"></p>
  
  <p>As you can see, this is not very readable, I would expect DIV's to be outputted in two columns, so the first columns would contain "A B C D" and the second one "E F G H".</p>
  
  <p>Is there a way to do this, without changing the markup? It's possible, to add different class, to even and odd divs, but since divs are outputted in a loop, theres is no way split them differently.</p>
  
  <p>See a demo: <a href="http://jsfiddle.net/KZcCM/" rel="noreferrer">http://jsfiddle.net/KZcCM/</a></p>
  
  <p>Note: I already solved it by splitting the list in two parts by PHP, but I want to know, if there is a HTML/CSS solution here.</p>