title: Making Floating Boxes in CSS fill the wrapper
body: <p>This is driving me crazy.</p>
  
  <p>I am building a page which will only have a predefined header and footer, the content between them will be a set of boxes (dynamic) that have to be properly positioned in order to fill the wrapper.</p>
  
  <p>Here is an example: <a href="http://jsfiddle.net/rdMKQ/1/" rel="nofollow">http://jsfiddle.net/rdMKQ/1/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="wrapper" &gt;
      &lt;div class="box" style="width:60px;height:60px;background-color:blue"&gt; 1 &lt;/div&gt;
      &lt;div class="box" style="width:40px;height:30px;background-color:red"&gt; 2 &lt;/div&gt;
      &lt;div class="box" style="width:80px;height:60px;background-color:yellow"&gt; 3 &lt;/div&gt;
      &lt;div class="box" style="width:40px;height:30px;background-color:green"&gt; 4 &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Non-Inline CSS:</strong></p>
  
  <pre><code>#wrapper{width:180px;}
  .box{float:left}
  </code></pre>
  
  <p>All the boxes <code>float:left</code> and the sizes I used are just 'random' as a matter of example</p>
  
  <p>What can I do to position the green box (4) just below red one (2) to fill the gap?</p>
  
  <p>Requirements of the solution:</p>
  
  <ul>
  <li>I can not define specific styles for a single box, styles should be common to all boxes</li>
  <li>Boxes can not overlap</li>
  </ul>
  
  <p>PD: I've already tried the jQuery Masonry Plugin to let him make the work filling the gap in JS, but no luck, there's no option that does what I need.</p>
  
  <p>Many thanks in advance for your help.</p>