title: How to snap divs together vertically in CSS like Pinterest have
body: <p>I have 4 divs floated to left, and I can see 2 in row.</p>
  
  <pre><code>.box {
    width: 50%;
    border: 1px solid red;
    float: left;
    box-sizing: border-box;
  }
  </code></pre>
  
  <p>Divs are not snapping together. I mean I don't like that vertical white space :-)</p>
  
  <p>Investigating Pinterest I found they use <code>position: absolute</code>, and <code>top</code>, <code>left</code>. And that's crazy, I guess some JS is responsible for calculations.</p>
  
  <p>Here is JS Bin: <a href="http://jsbin.com/kurayama/4/edit" rel="nofollow">http://jsbin.com/kurayama/4/edit</a></p>
  
  <p>Is it possible do it with simpler CSS?</p>