CSS issue with IE9 and floating divs aligning

Question

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...

Left div:

{
float: left;
clear: both;
margin-right: 10px;
} 

Right div (one that is showing up under on IE9):

width: 350px;
float: right;
margin-left: 10px;
height: 150px;
overflow: hidden;

here is what it looks like in IE9: http://i.imgur.com/tXgAZaN.png

Here is what it looks like in Chrome or FF: http://i.imgur.com/yLOFvew.png

Solution

I think this is one of those clear-fix issues. I also run into these problems every now and then. The fix, or hack is to always add a new element a so-called pseudo-element to it for it to render correctly. So

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Here cf will be your content

Its from http://nicolasgallagher.com/micro-clearfix-hack/

I hope this fixes it for you, let me know.