Display problem in IE6

Question

I have a web page that shows a schedule. The schedule is being shown incorrectly in IE 6. Here is a schreenshot:

SCREENSHOT DELETED FROM WEBSERVER

The Green menu on the left is floated left. In IE6, the schedule table is being shown below the bottom of the menu. I can replicate the problem in modern browsers by applying a clear: right or clear: both on the schedule table. But, I cannot figure out how to fix the problem in IE6.

Any suggestions? The page is here if you want to try and apply some styles using firebug or similar style debugging tool.

EDIT

After trying to float the white main content area left, I get this in IE6. Same in IE7, but not so far to the right.

Answer 1

On the selector for the schedule table (table.schedule) I commented out:

width: 100%

That was causing the problem in IE6 and commenting that out didn't break it in other browsers. It looks the same in all browsers now.

Thanks for the suggestions.

Answer 2

Try floating the white main content section left also.

Answer 3

Someone else asked the identical question a few days ago, CSS Floats - content falling down in IE6,

Maybe some of the answers there will help. I notice your design has no footer, so in theory you shoudl be able to replace the floated layout with layout using absolute and relative positioning

Answer 4

Add float: left; to table.schedule. This fixes the spacing issue in IE 6 but causes issues in IE7 and FF. I would use the code below to just target IE6.

*.html table.schedule
{
    float: left;
}