title: different height divs float in two columns
body: <p>I have two columns and want to stack divs of different heights in order of appearance.</p>
  
  <p>The divs are dynamically created.</p>
  
  <p>If i only float them on 50% of width, soon I come in situation that div #4 is 5 times higher than incoming few divs. Then next div is top aligned with bottom of previous div.</p>
  
  <p>I need to fit child divs in container to be exact match like this:</p>
  
  <pre><code>----- -------
    1      2
  -----
    3   -------
  -----    4
    5
  -----
    6
  -----
    7   -------
  -----    8
    9
  
  ----- 
   10   -------
          11
        -------
        -------
  -----
  </code></pre>
  
  <p>Here is code snippet what I have done:</p>
  
  <pre><code>&lt;style&gt;
      .box {background:#20abff; color:#fff; width:50%; margin: 5px;}
      .left {float:left;}
      .right {float:right;}
      .container {width:205px;}
  &lt;/style&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div class="box left" style="height:60px;"&gt;1&lt;/div&gt;
              &lt;div class="box left" style="height:80px;"&gt;2&lt;/div&gt;
              &lt;div class="box left" style="height:30px;"&gt;3&lt;/div&gt;
              &lt;div class="box left" style="height:70px;"&gt;4&lt;/div&gt;
              &lt;div class="box left" style="height:60px;"&gt;5&lt;/div&gt;
              &lt;div class="box left" style="height:20px;"&gt;6&lt;/div&gt;
              &lt;div class="box left" style="height:40px;"&gt;7&lt;/div&gt;
              &lt;div class="box left" style="height:90px;"&gt;8&lt;/div&gt;
              &lt;div class="box left" style="height:30px;"&gt;9&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>and it looks similar to this</p>
  
  <p><a href="http://dl.dropbox.com/u/142343/divstack.html" rel="nofollow">http://dl.dropbox.com/u/142343/divstack.html</a></p>
  
  <p>appreciate help</p>