CSS overlaps help

Question

Hey

http://69.65.3.168/~doubleop/pro.sperity/

The content and footer are both in a div (#left) and the sidebar is in (#right)

#left{
width:685px;
float:left;
overflow:visible;
}

#right{
width:215px;
float:left;
margin-top:20px;
}

The footer is 900px; wide, which is why i set #left to overflow:visible, so you could see it. I am doing this because i want the sidebar to overlap the footer when the content area has small amount of content. Obviously, when the content area expands, the sidebar will remain in the same place, but the footer will be pushed down. Al this gives me a nice overlap effect.

However, IE 6 doesnt like this, and it pushes the sidebar under neath the footer.

If i change #left property to overflow:hidden, the sidebar appears in the right place, but the footer is cut off. So the problem lies within the overflow:hidden part.

Does any one know what i can do to work around this?

Answer 1

Just place your #footer after #right div.

<div id="left">
</div>
<div id="right">
</div>
<div style="clear: both;"></div>
<div id="footer">

Answer 2

Yeap. You're going to need to do a "clear:both" on the footer. Your right hand float is out of the flow of the page and the footer doesn't know that anything is above it. Clearing both will bascially turn off the floating making the footer think that something is above it, which will in turn push it to the bottom where it belongs.

Answer 3

Have you tried Dean Edwards' IE7.js? It fixes many CSS problems on IE6 and IE7, so give it a shot.

http://code.google.com/p/ie7-js/