IE floated layout breaks

hi, i have a problem with IE, <sarcasm>i know it's rare, cause IE is flawless</sarcasm>

my floated layout breaks, see here :

http://www.mogwaishop.com/
http://www.mogwaishop.com/stylesheet.css
browsershots : http://browsershots.org/http://www.mogwaishop.com/

my table (for data..) has a width of 97% inside my div#content with a width of 78%

reducing the content or table width did not help it, so i do not think it is caused by a "more than 100%" issue

weirdly, my #masthead is using clear:both, but #content still goes on the right of it!

What happens if you temporarily make your table really narrow?
Does IE still put it to the right?
(i.e. is it a width thing or a layout thing, if you see what I mean?)

hi yune, thanks for the answer, it really seems like a layout issue, but i do not see where the layout is complicated, except from the embed table.

it's the float left on #masthead

comment it out and you'll see IE's ok


#masthead {
/*float:left;*/
width:100%;
background:#05dcfa;
border-bottom:3px solid #fff;
/*clear:both*/
}


weirdly, my #masthead is using clear:both, but #content still goes on the right of it!

the clear rule means #masthead is to clear the stuff before it in the code rather than stuff following it is to clear #masthead.

(... I think..... getting late.....)


also, does the table really need to be floated?


#content table {
float:right;
border:1px solid #aaa;
padding:2px;
width:97%;
}

thanks, i never tough the floated masthead would cause this problem, well IE did not want to clear it (a clear should not allow anything to float next to it... as far as i know!)