Float divs still overlapping in IE (even with clear:both)

[robinsonirwin]

So,
I've been finding plenty of posts that recommend using the "clear:both" definition in the containers I have that hold my Float DIVS. But for some reason, it's still not fixing my overlap problem in IE. It works fine in everything else. The float divs disappear behind my footer.

I have a centered Wrapper. In that wrapper, I have a container called "maincontent" and inside maincontent" I have four floating divs (2 left, 2 right).

The reason I have Wrapper and Maincontent is because I have two separate backgrounds going on.
Does anyone have a quick fix for the overlap issue?

Below is html:
<div id="wrapper">
<div id="MainContent">
<div id="stageheader_left">
<p>content content content</p>
</div>
<div id="stagecontainer_right">
<p>content content content</p>
</div>
<div id="stageslideshow_right">
<img src="blahblah.jpg" />
</div>
<div id="emptydiv">&nbsp;</div>
</div>
<div id="emptydiv">&nbsp;</div>
<div id="Footer">
<p>copyright 2007</p>
</div>
</div>

----and here's my css:----
#wrapper{
position: relative;
clear:both;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: auto;
width: 830px;
background-image:url('backgroundrepeat.jpg');
background-repeat:repeat-y;
text-align: center;
}

#emptydiv {
clear: both;
}

#stageheader_left {
float: left;
margin-top: 80px;
margin-left: 55px;
padding-left: 0px;
padding-right: 0px;
background: #d9d9d9;
width: 416px;
}
#stagecontainer_left {
float: left;
margin-top: 10px;
margin-left: 55px;
padding-left: 15px;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 15px;
background: #d9d9d9;
border: solid #8a8a8a 1px;
width: 414px;
text-align: left;
}
#stagecontainer_right {
float: right;
margin-top: 10px;
padding-top: 3px;
padding-bottom: 8px;
margin-right: 55px;
margin-left: 0px;
padding-left: 15px;
padding-right: 15px;
background: #d9d9d9;
border: solid #8a8a8a 1px;
width: 224px;
text-align: left;
}
#stageslideshow_right {
float: right;
margin-top: 10px;
padding-top: 0px;
padding-bottom: 0px;
margin-right: 55px;
margin-left: 0px;
padding-left: 0px;
padding-right: 0px;
background-color: transparent;
width: 256px;
}

#MainContent{
padding-top: 70px;
width: 830px;
height: 577px;
margin-bottom: 20px;
padding-bottom: 10px;
background-image:url('topcontentbg.jpg');
background-repeat: no-repeat;
padding-bottom: 0px;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color: #0000000;
}

#Footer{
clear: both;
width: 830px;
font-family:Arial, Helvetica, sans-serif;
background-image:url('footerbg_high.jpg');
background-repeat: no-repeat;
color: #8a8a8a;
font-size: 11px;
line-height: 14px;
padding-bottom: 0px;
padding-top: 8px;
margin-bottom: 0px;
height: 281px;
background-color: #8a8a8a;
}

Any help is much appreciated. You all are awesome!

[SixTimesEight]

Are you declaring a doctype? Which browsers are you seeing problems in?

I threw together a test page with what you provided and it worked fine for me in FF and IE7.

I would however recommend that instead of floating your divs in separate directions, float them all left and just order them in the html so that they fall into place properly.