title: height: 100% not working for parent div with floated inner div
body: <p>I have 3 floated div inside a parent div. first and last div has some fixed height (eg: 100px and 150px). For the second div, I have set the height to 100%. But the height of the second div is not increasing as the parent's height increases.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="main"&gt;
      &lt;div class="one"&gt;1&lt;/div&gt;
      &lt;div class="two"&gt;&lt;/div&gt;
      &lt;div class="three"&gt;3&lt;/div&gt;
      &lt;br style="clear: both" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body, html {
      height: 100%;
  }
  .main {
      width: 500px;
  }
  .one, .two, .three {
      float: left;
      width: 150px;
      border: 1px solid #CCC;
      margin-left: 5px;
  }
  .one {
      height: 100px;
  }
  .two {
      height: 100%;
  }
  .three {
      height: 150px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/p01trnj6/" rel="nofollow">DEMO</a></p>