title: Floating vertical alignment and ie 7 issue
body: <p>My floated divs worked like a charm, until I noticed a minor bug in the vertical alignment in the two top most floated divs. </p>
  
  <p>The vertical alignment is off if the divs height is different does anyone know a fix for this? It wouldn't matter if the spacing was at the bottom but its at the top.</p>
  
  <p>My ASCII diagram of the issue:</p>
  
  <pre><code>div1|annoyinggap
      |div2
      | 
  ____|____    
  div3 div4
      |
      |
      |
  ____|____ 
  </code></pre>
  
  <p>Also in IE 7 the DIVS just show in one column rather than a nice 2 x 2 grid?</p>
  
  <p>Related question: <a href="https://stackoverflow.com/questions/7952496/2-x-2-div-grid-using-float-with-min-height">2 x 2 div grid using float with min-height</a></p>
  
  <p>HTML/CSS:</p>
  
  <pre><code>&lt;div class="boxContainerTop"&gt;
  &lt;div class="boxContainer"&gt;
    &lt;div class="Section2R2CCol"&gt;&lt;/div&gt;  
    &lt;div class="Section2R2CCol"&gt;&lt;/div&gt;  
    &lt;div class="Section2R2CCol"&gt;&lt;/div&gt;  
    &lt;div class="Section2R2CCol"&gt;&lt;/div&gt; 
  &lt;/div&gt;  
  &lt;/div&gt;
  
  .boxContainerTop {
      float: left;
  }
  
  .boxContainer {
      border: 1px solid #BBC614;
      float: left;
      height: auto;
      margin-bottom: 10px;
      margin-left: 10px;
      margin-top: 2px;
      width: 950px;
  }
  
  .Section2R2CCol:after {
      clear: both;
      content: ".";
      display: block;
      float: left;
      height: 0;
      line-height: 0;
      visibility: hidden;
  }
  
  .Section2R2CCol {
      display: inline-block;
      height: auto;
      min-height: 125px;
      padding-top: 5px;
      width: 470px;
  }
  </code></pre>
  
  <p>On a side note before someone mentions it: Yes we can argue who care's about IE 7 its history, my answer is enough of the visitors to the website use ie 7 to justify maintaining development. Any new functionality is built for ie8/ie9.</p>
  
  <p>As requested: <a href="http://jsfiddle.net/yBMdc/" rel="nofollow noreferrer">http://jsfiddle.net/yBMdc/</a> jsfiddle test case. css actually varies apologies for this CSS has been updated here.</p>