Clearing Floating Menu with IE Problem?

[crimsongt]

I am new to CSS, but I have managed to redo my entire website that was coded with tables to CSS. I was doing the last portion which is a side menu that is floated to the right, and for some reason the footer DIV will not clear it properly in IE.

Basically the site is laid out like this...

#Header
#Sidemenu
#Content
#Footer

Now the Content DIV and Sidemenu DIV are both next to each other, and I used the float: right; on the sidemenu and clear: right; on my footer div. It works properly when used in Firefox but the footer overlaps the sidemenu when viewed in IE. Here is the DIVs taken from my css file.


#sidemenu {
float: right;
width: 277px;
}

#content {
width: 493px;
margin-left: 0px;
background-image: url(../images/text-bgline.jpg);
}

#footer {
clear: right;
width: 760px;
height: 50px;
margin-top: 0px;
margin-left: 0px;
background-color: #1D72CD;
text-align: center;
}

And here is the code from the index.htm that is overlapping.

<div id="footer">

<div id="footer-image"><img src="images/btmbg-2.jpg"></div>

<div id="footer-text"><span class="text style1 style1">All Rights Reserved Student Digital 2007</span>

</div>

</div>

Can someone please help figure this out. Its causing me a lot of headaches from all the expirmenting that doesn't seem to be working.

[craig]

Try changing the clear:right; to clear:both;

If that doesn't work then post a URL to your site so we can see what's going on.

[crimsongt]

That doesn't work, tried that numerous times.

http://www.studentdigital.com/

Its not extremely noticeable, but look at the bottom of the side menu if you are viewing it in IE and you will notice the bottom is getting chopped off.

[craig]

Well I am seeing this (http://img69.imageshack.us/img69/834/ooopshx4.jpg)

That is simply bad maths, you need to make sure your width on your left and right div's are correct, it seems the left hand side is maybe a couple of pixels too big.