title: Why is there extra "white space" between these floated Div's in FF and not IE?
body: <p>Why is there so much extra space in FireFox between the two floated blocks?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
   &lt;style type="text/css"&gt;
    #Container-900px { 
      width:900px;
     padding: 10px;
     border: 1px solid #CCCCCC;
     }
      #Container-900px .left { float:left; width:435px; height:300px; }
     #Container-900px .right { float:right; width:435px; height:300px; }
  
    /* float clearing for IE6 */
    * html .clearfix{
      height: 1%;
      overflow: visible;
    }
  
    /* float clearing for IE7 */
    *+html .clearfix{
      min-height: 1%;
    }
  
    /* float clearing for everyone else */
    .clearfix:after{
      clear: both;
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
      font-size: 0;
    }
  
     /* CSS3 Styles */
    #Container-900px { 
     -moz-box-shadow: 0px 0px 12px #CCC; /* Firefox */
        -webkit-box-shadow: 0px 10px 12px #CCC; /* Safari, Chrome */
        box-shadow: 0px 0px 12px #CCC; /* CSS3 */ 
      }
     #Container-900px .left {
       background-color: rgb(238, 238, 238);
     }
     #Container-900px .right {
          background-color: rgb(238, 238, 238);
        }
   &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Software&lt;/h1&gt;
   &lt;div id="Container-900px"&gt;
    &lt;div class="left"&gt;
  
    &lt;/div&gt;
    &lt;div class="right"&gt;
  
    &lt;/div&gt;
   &lt;div class="clearfix"&gt;&amp;nbsp;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>