title: CSS border is not wrapping whole div content
body: <p>This is my html code which has "box" as main div and then three divs inside it
  which are positioned left,middle and right respectively.</p>
  
  <pre><code>&lt;div id="box"&gt;
   &lt;div class="left"&gt;Left&lt;/div&gt;     
   &lt;div class="middle"&gt;Middle&lt;/div&gt;
   &lt;div class="right"&gt;Right&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is my css code</p>
  
  <pre><code>#box {
      width:90%;
      height:auto;
      border:5px solid green;
  }
  .left {
      float:left;
      width:30%;
  }
  .right {
      float:right;
      width:30%;
  }
  .middle {
      float:left;
      width:30%;
  }
  </code></pre>
  
  <p>This is jsfiddle link: <a href="http://jsfiddle.net/hep9oLzn/" rel="nofollow">http://jsfiddle.net/hep9oLzn/</a>
  The border is not wrapping the content.</p>