title: How to restack horizontal flow of divs on a page
body: <p>how can i take up the space between a group of multi height divs vertically so the gap between them is consistantly the same? The div widths are fixed. The heights will vary. The quantity of divs will vary. Here is a <a href="http://jsfiddle.net/tszoro/DJsCW/" rel="nofollow">JsFiddle Example</a>. Is there a way to set the marginTop to minus value dynamically with javascript until the desired gaps are met?</p>
  
  <pre><code>body {
  background-color: #AFC2EB;
  padding: 10px;
  }
  
  body .section {
  border: 2px solid #0000CC;
  margin: 5px;
  background-color: #CCCCCC;
  border-radius: 5px;
  width: 150px;
  float: left;
  }
  
  &lt;body&gt;
  &lt;form id="form1" runat="server"&gt;
      &lt;div id="parent_div" style="width: 500px;"&gt;
          &lt;div id="div1" style="height: 200px;" class="section"&gt;&lt;/div&gt;
          &lt;div id="div2" style="height: 100px;" class="section"&gt;&lt;/div&gt;
          &lt;div id="div3" style="height: 50px;" class="section"&gt;&lt;/div&gt;
          &lt;div id="div4" style="height: 200px;" class="section"&gt;&lt;/div&gt;
          &lt;div id="div5" style="height: 100px;" class="section"&gt;&lt;/div&gt;
          &lt;div id="div6" style="height: 50px;" class="section"&gt;&lt;/div&gt;
          &lt;div id="div7" style="height: 100px;" class="section"&gt;&lt;/div&gt;
          &lt;div id="div8" style="height: 200px;" class="section"&gt;&lt;/div&gt;
          &lt;div id="div9" style="height: 50px;" class="section"&gt;&lt;/div&gt;
          &lt;div id="div10" style="height: 100px;" class="section"&gt;&lt;/div&gt;
          &lt;div id="div11" style="height: 100px;" class="section"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>