Box overlaps content in IE6

[Nickgod99]

Hello there.

I have been making my website using xhtml / css and I can't figure out something within IE6. Everything works fine in Firefox and Opera.

Link to page:

http://arexhost.com/index.php?act=standardplan

As you can see (If your browsing using IE6) the left Company News box has overlapped the main content box which shouldnt happen. I'm not sure if I sure use a clear: left/right/both or something somewhere. Can anyone guide me to the problem?

Thanks.

Preview:
http://img240.imageshack.us/img240/4265/dasdasdasdasxr7.jpg

[koyama]

Hi Nickgod99,

Surely, it is IE6 that renders your page incorrectly.

When it comes to floats in CSS IE6 is so buggy and I have realized that one is best off coding using only techniques with a known behaviour.

Your page demonstrates that IE6 doesn't really like the mixing of left and right floated elements. Your DIV for the main content is right floated while other DIV's are left floated.

The fix:
Change the main content div to be left floated
#main_content{
border: 2px solid #979797;
float: left; /*right;*/
position: relative;
width: 577px;
right: 11px;
margin-bottom: 10px;
margin-top: 10px;
}


This will cause its position to shift slightly in the horizontal direction, but then you can correct for this shift by e.g. its right or left property

[Nickgod99]

Supurb, fixed it. Thanks very much.

:thumbsup: