Floats being pushed down in IE8 but not IE7 or Firefox

Question

The page in question is here: http://supportdogs.digitalportals.net/PhotoGallery/16-Events

You can see in IE8 that the content is being pushed down under the sidebar. If you view it in IE8 compatibility mode, it doesn't happen, nor does it happen in Firefox. If you browse to a different page in IE8 the issue does not persist.

The basic layout is

<div class="contentContainer">
     <div class="left"></div>
     <div class="right"></div>
</div>

The css for those three classes is here

#contentContainer {
 background: transparent url('../images/bodyBG.png') repeat-y center top;
 clear: both;
 padding: 0px 30px 0px 30px;
 margin-top: 83px;
 width: 935px;
}

#contentContainer .left {
 float: left;
 margin-top: 60px;
 padding-left: 5px;
 width: 195px;
}

#contentContainer .right {
 float: right;
 margin: -55px 0px 20px 0px;
 min-height: 620px;
 width: 700px;
}

Anyone have any idea what could be causing this?

Answer 1

I believe it has to do with margins. Try using padding instead.

Answer 2

I'm guessing the problem is the clear: both you have on #contentContainer. Whenever you "clear: both" something, it is supposed to fall after all floated content on the same line. I think the reason it's acting a little buggy is because your floated DIVs are children of #contentContainer (not on the same line).

If your worried about the height of #contentContainer not expanding, you should place another element after your floated elements with clear: both, or you can check out this article: http://www.webtoolkit.info/css-clearfix.html

Answer 3

You have a (PayPal) form nested inside another (aspnetForm) form; this is invalid HTML. IE8 is parsing the page as if the inner </form> tag closed the outer form, causing the layout to break.

In IE8 you can open the developer tools (Tools > Developer Tools) to open a Firebug-like view of how IE is parsing your page.

Answer 4

While this isn't a solution, you could put in this bit of code in the head to make IE8 act like IE7.

< meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />