title: How to float to fill the vertical space above a block div?
body: <p>I have a container div, which contains a varying amount of divs all with the same class. The contents of the various divs are dynamic and will be driving the height of their div blocks. The width is set to a fixed value making for 2 collumns. I have run into a situation where the first div is floated to the left, then the following 2 divs are each individually shorter than the first, but when combined they extend beyond the first div to their left. The following fourth div is then floating back to the first column under the first div, however it is not floating "up" to be directly under the first div. It will display as being floated to the left with the vertical position being positioned under the third div block. Is there a way to remedy this? </p>
  
  <p>Remember i am generating each of the divs within the container div via a loop and consequently  would like to have a consistent style class for each of the divs. If it is not possible to do so with one style class, is there a way to get the height of the div after i filling it with the php script?</p>
  
  <p>Here is an example of the problem i am experiencing:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Dynamic Div Test&lt;/title&gt;
  &lt;style&gt;
  .container2 {
      width: 1000px;
      display: block;
      position: relative;
      float: none;
      margin-left: auto;
      margin-right: auto;
      padding: 0px;
      background: #000;
      overflow: hidden;
      -moz-box-shadow: 0px 0px 20px #FFF;
      -webkit-box-shadow: 0px 0px 20px #FFF;
      box-shadow: 0px 0px 20px #FFF;
      min-height: 100%;
  }
  .container {
      width: 660px;
      display: block;
      position: relative;
      float: left;
      margin-left: 5px;
      margin-top: 10px;
      margin-bottom: 35px;
      background-color:#093;
      height:400px;
  }
  .dynamicDiv {
      float: left;
      position:relative;
      display:block;
      background-color: #FFF;
      width: 325px;
      padding: 0px;
      margin-top: 0px;
      margin-right: 5px;
      margin-bottom: 5px;
      margin-left: 0px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="container2"&gt;
      &lt;div class="container"&gt;
          &lt;div id="div1" class="dynamicDiv"&gt;1&lt;br /&gt;2&lt;br /&gt;3&lt;br /&gt;&lt;/div&gt;
          &lt;div id="div2" class="dynamicDiv"&gt;1&lt;br /&gt;2&lt;br /&gt;&lt;/div&gt;
          &lt;div id="div3" class="dynamicDiv"&gt;1&lt;br /&gt;2&lt;br /&gt;&lt;/div&gt;
          &lt;div id="div4" class="dynamicDiv"&gt;1&lt;br /&gt;2&lt;br /&gt;3&lt;br /&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>