title: max-width doesn't work with float
body: <p>I'm trying to design a responsive page. I have 2 divs with the same height.
  They both have the max-width property and the max-width is working. Once I add the float:left property the max-width doesn't affect them.</p>
  
  <p>Here's an example: <a href="http://jsfiddle.net/dEEW5/2/">jsfiddle</a></p>
  
  <pre><code>&lt;div class="color1"&gt;
     Some Text
  &lt;/div&gt;
  &lt;div class="color2"&gt;
      Bla
  &lt;/div&gt;
  &lt;div style="clear: both;"&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>div{
      height: 100px;
      float: left;
  }
  .color1{
      background-color: #6AC1FF;
      max-width: 400px;
  }
  .color2{
      background-color: #BDBCF4;
      max-width: 100px;
  }
  </code></pre>
  
  <p>I want them to be align vertically. Is there another way to make it other than float and
  keep the max-width?</p>