title: Display 3 div next to each other
body: <p>I have three divs with an complete length of 150% but i dont get them to float in one line:
  Here is my html:</p>
  
  <pre><code>&lt;div class="clearfix"&gt;
  &lt;div class="left" id="w1"&gt;TEST&lt;/div&gt;
  &lt;div class="left" id="w2"&gt;TEST&lt;/div&gt;
  &lt;div class="left" id="w3"&gt;TEST&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my css:</p>
  
  <pre><code>html,body { height:100%;width:auto;}
  
  .left {
  float: left;
  
  }
    #w1 {width:20%;
   background-color:#009;
    }
  #w2{width:100%;
    background-color:#9F3;
   }
  #w3{ width:30%;
  background-color:#30C;}
  </code></pre>
  
  <p>Here is the full code on fiddle: <a href="http://jsfiddle.net/sZwXN/1/" rel="nofollow">http://jsfiddle.net/sZwXN/1/</a>
  Besides his it would be nice if each panel has an height o 100%!</p>