title: css: float blocks to occupy all free space
body: <p>I'm trying to make an "image mosaic" that consists mostly of images of the same size, and some of them the double height.</p>
  
  <p>They all should <strong>align neatly</strong> like this:</p>
  
  <p><img src="https://i.stack.imgur.com/UDrOe.png" alt="goal"></p>
  
  <p>To make automatic generation of those mosaic as easy as possible, I thought floating them would be the best option. Unfortunately, the big block causes the following ones to <strong>flow behind</strong> it, but not before:</p>
  
  <p><img src="https://i.stack.imgur.com/hIQBo.png" alt="current floats"></p>
  
  <p>What can I do - apart from manually positioning them - to get the images to the place I want, and still have it easy to automatically create likewise layouts?</p>
  
  <hr>
  
  <p>The code I'm currently using is :</p>
  
  <p><strong><a href="http://jsfiddle.net/xXX2S/" rel="noreferrer">FIDDLE</a></strong></p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class="frame"&gt;
      &lt;div id="p11" class="img"&gt;1.1&lt;/div&gt;
      &lt;div id="p12" class="img h2"&gt;1.2&lt;/div&gt;
      &lt;div id="p13" class="img"&gt;1.3&lt;/div&gt;
      &lt;div id="p21" class="img"&gt;2.1&lt;/div&gt;
      &lt;div id="p22" class="img"&gt;2.2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>.frame {
      background-color: blue;
      border: 5px solid black;
      width: 670px;
  }
  .img {
      width: 200px;
      height: 125px;
      background-color: white;
      border: 1px solid black;
      float: left;
      margin: 10px;
  }
  .h2 {
      height: 272px;
  }
  </code></pre>