title: How to float divs with different heights?
body: <p>What I want to achieve:</p>
  
  <p><img src="https://i.stack.imgur.com/cBvZK.png" alt="enter image description here"></p>
  
  <p>What I currently get: (the second box has an extra list item that messes up the whole layout)
  <img src="https://i.stack.imgur.com/TGJ5w.jpg" alt="enter image description here"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="categories"&gt;
      &lt;div class="cat"&gt;   cat1    &lt;/div&gt;
      &lt;div class="cat"&gt;   cat2    &lt;/div&gt;
      &lt;div class="cat"&gt;   cat3    &lt;/div&gt;
      &lt;div class="cat"&gt; cat4 &lt;/div&gt;
      &lt;div class="cat"&gt;   cat5    &lt;/div&gt;
      &lt;div class="cat"&gt;   cat6    &lt;/div&gt;
      &lt;div class="cat"&gt;   cat7    &lt;/div&gt;
      &lt;div class="cat"&gt;   cat8    &lt;/div&gt;
      &lt;div class="cat"&gt; cat9 &lt;/div&gt;
      &lt;div class="cat"&gt;   cat10   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>One solution would be to group five items in a new div and apply <code>clear:left</code> but I can't do that due to how the php code works.</p>