title: IE9 doesn't compute width properly with floating elements
body: <p>When I create say a div container with a say 100px width and place 2 div elements one floating to the left and the other to the right with a border of 2px and a width of 46px each they should be drawn on the same line side by side covering the whole width of the parent container. This happens in Firefox and Chrome but IE9 draws them on separate lines and in order to have the same effect as in the other browsers I need to specify a width of 102px in the parent element.
  Why is that?</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  
  &lt;style&gt;
  
  div {
  margin:0;
  padding:0;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div style="border: 5px solid;width:100px;height:100px"&gt;
  
  &lt;div style='border:2px solid green;width:46px;height:46px;float:left'&gt;&lt;/div&gt;
  
  &lt;div style='border:2px solid 
  green;width:46px;height:46px;float:right'&gt;&lt;/div&gt;
  &lt;div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>