title: Floating divs top to bottom and then left to right in a fixed height container
body: <p>I am trying to float DIVs vertically from top to bottom and from left to right in a fixed height container. <a href="https://stackoverflow.com/questions/16316329/div-vetically-floating-div-arrange-from-up-to-down-by-rows">Vetically floating DIV arrange from up to down by rows</a> raises the same issue and a solution has been given in the cases where divs have the size height:width as 1:1. In my cases each div is a long rectangle and as expected the solution explained in the above post breaks.</p>
  
  <p>I was able to find another solution using a new css property called flex columns.The below given style does the job but it wont work in older versions of webkit.</p>
  
  <pre><code>&lt;style&gt;
  .container {
      display:flex;
      flex-direction:column;
  
  }
  .area {
      width:200px;
      height:100px;
  }
  &lt;/style&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="area"&gt;area1&lt;/div&gt;
      &lt;div class="area"&gt;area2&lt;/div&gt;
      &lt;div class="area"&gt;area3&lt;/div&gt;
      &lt;div class="area"&gt;area4&lt;/div&gt;
      &lt;div class="area"&gt;area5&lt;/div&gt;
      &lt;div class="area"&gt;area6&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My planing result should be like this:</p>
  
  <pre><code>    ----------------------------&gt;
      | -------- --------
      | |Area 1| |Area 5|
      | -------- --------
      | -------- --------
  max | |Area 2| |Area 6|
  500 | -------- --------
   px | --------
      | |Area 3|   etc..
      | --------
      | --------             /\
      | |Area 4|   etc....... |
      | --------   
      ---------------------------&gt;
  </code></pre>
  
  <p>The number of items in the list is arbitrary. As the number of items increases it should grow sideways.</p>
  
  <p>My questions is: Can we have any solution which works in older versions of webkit. I DONT need a solution which works across all browser. My product is specific to webkit.</p>
  
  <p>Or it will be really helpful if someone can give pointers on the modifications to be made for the solution mentioned in the duplicate post I have mentioned.</p>