title: How to get different height html divs to float up
body: <p>I've got a series of dynamically created divs of varying heights in a container div. </p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id='d1'&gt;Varying text...&lt;/div&gt;
    &lt;div id='d2'&gt;Varying text...&lt;/div&gt;
    &lt;div id='d3'&gt;Varying text...&lt;/div&gt;
    &lt;div id='d4'&gt;Varying text...&lt;/div&gt;
    &lt;div id='d5'&gt;Varying text...&lt;/div&gt;
    &lt;div id='d6'&gt;Varying text...&lt;/div&gt;
    &lt;div id='d7'&gt;Varying text...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/52zkq.jpg" alt="flow.jpg"></p>
  
  <p>When I "float: left" the divs wrap as expected leaving white space between the shorter divs and the next row of divs. </p>
  
  <p><img src="https://i.stack.imgur.com/f3ejt.jpg" alt="flow2.jpg"></p>
  
  <p>How would I get the divs to effectively "float: up", wrapping veritcally rather than horizonatally.  Using only css.</p>
  
  <p>Ideally, item 2 would be under item 1 but any improvement would help.</p>
  
  <p>So it would end up looking like this</p>
  
  <p><img src="https://i.stack.imgur.com/ni3pD.png" alt="enter image description here"></p>