title: Flow layout with collapsible divs, that maintains row structure
body: <p>I have a fluid layout made with collapsible divs. When they collapse, they leave an empty space underneath, which is automatically filled by the next div (they all have <code>float: left</code>). This however does not look good and I would like to maintain the "row structure" without loosing the ability to move the divs around (when the window gets smaller). <a href="http://jsfiddle.net/GLf7m/" rel="noreferrer">JSFiddle here.</a></p>
  
  <p><img src="https://i.stack.imgur.com/xYrxy.png" alt="Problem description"></p>
  
  <p>CSS snippet:</p>
  
  <pre><code>.clickable {
       border: 1px dotted black;
       width: 200px;
       float: left;
       height:50px;
       margin-right:20px;
       margin-bottom:20px;
  }
  </code></pre>
  
  <p>HTML snippet:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;title&gt;Layout test&lt;/title&gt;&lt;/head&gt;
  &lt;body&gt;
     &lt;div class="clickable"&gt;&amp;nbsp;1&amp;nbsp;&lt;/div&gt;
     &lt;div class="clickable"&gt;&amp;nbsp;2&amp;nbsp;&lt;/div&gt;
     &lt;div class="clickable"&gt;&amp;nbsp;3&amp;nbsp;&lt;/div&gt;
     &lt;div class="clickable"&gt;&amp;nbsp;4&amp;nbsp;&lt;/div&gt;
     &lt;div class="clickable"&gt;&amp;nbsp;5&amp;nbsp;&lt;/div&gt;
     &lt;div class="clickable"&gt;&amp;nbsp;6&amp;nbsp;&lt;/div&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>
  
  <p>Is there a pure CSS solution? I would like not to mess with JavaScript. I know I can dynamically determine the number of columns and then wrap them into "rows", but I'm not willing to use this solution yet. </p>