title: How to remove white space from different height divs and make them "suck up" to each other?
body: <p>I'm trying to make my "divs" stack up. The divs will always be different heights and they create "white space" gaps. I want to remove this white space and "butt" them up next to each other.</p>
  
  <p>This seems like it would be very simple, but I'm having a very hard time finding a solution! I only have one requirement for this, the HTML given in the JSfiddle cannot be edited/added to. I have to do this purely with CSS. Does anyone have a solution? </p>
  
  <p><a href="http://jsfiddle.net/ZMvdy/1/" rel="nofollow">http://jsfiddle.net/ZMvdy/1/</a></p>
  
  <p><strong>HTML</strong>    </p>
  
  <pre><code>&lt;div class="small"&gt;small&lt;/div&gt;
  &lt;div class="xlarge"&gt;xlarge&lt;/div&gt;
  &lt;div class="medium"&gt;medium&lt;/div&gt;
  &lt;div class="xlarge"&gt;xlarge&lt;/div&gt;
  &lt;div class="large"&gt;large&lt;/div&gt;
  &lt;div class="xlarge"&gt;xlarge&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div { background: lime; float: left; width: 48%; margin: 1% 1%; display: inline-block; overflow: hidden; vertical-align: top; }
  
  .small { height: 100px; }
  .medium { height: 150px; }
  .large { height: 200px; }
  .xlarge { height: 300px; }
  </code></pre>