title: How to position variable width and height boxes floating left as one-vertically in each line?
body: <p>I have lot of boxes (display: inline-block + float: left) with variety of width and height like this:</p>
  
  <pre><code>AA BB CC DDD EE FF GG
     BB    DDD    FF
           DDD
  </code></pre>
  
  <p>And i don't know how to do, that when box have to be wrapped, it will be aligned in next "line" like that:</p>
  
  <pre><code>AA BB CC DDD EE FF GG
     BB    DDD    FF
           DDD
  EE
  </code></pre>
  
  <p>Not as natural float: left:</p>
  
  <pre><code>AA BB CC DDD EE FF GG
     BB    DDD    FF EE
           DDD
  </code></pre>
  
  <p>Real example (<strong>current state</strong>):</p>
  
  <p><img src="https://i.stack.imgur.com/gdmp7.png" alt="BAD positioning"></p>
  
  <p><strong>Expected result</strong> wich i want to achieve:</p>
  
  <p><img src="https://i.stack.imgur.com/jBJ7G.png" alt="enter image description here"></p>
  
  <p><strong>jsFiddle demo:</strong> <a href="http://jsfiddle.net/tdSnH/" rel="nofollow noreferrer">here</a></p>