Floats being pushed down in IE8 but not IE7 or Firefox
- by BReno
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?