title: CSS issue with IE9 and floating divs aligning
body: <p>I am having an issue where I have a left floated div with an image in it and then a stack of a couple divs on the right. It displays fine in FF, Chrome, and IE9 when in compatibility mode, however the bottom most div gets pushed underneath the image when it is viewed in normal IE9...</p>
  
  <p>Left div:</p>
  
  <pre><code>{
  float: left;
  clear: both;
  margin-right: 10px;
  } 
  </code></pre>
  
  <p>Right div (one that is showing up under on IE9):</p>
  
  <pre><code>width: 350px;
  float: right;
  margin-left: 10px;
  height: 150px;
  overflow: hidden;
  </code></pre>
  
  <p>here is what it looks like in IE9:
  <a href="http://i.imgur.com/tXgAZaN.png" rel="nofollow">http://i.imgur.com/tXgAZaN.png</a></p>
  
  <p>Here is what it looks like in Chrome or FF:
  <a href="http://i.imgur.com/yLOFvew.png" rel="nofollow">http://i.imgur.com/yLOFvew.png</a></p>