CSS Horizontal Bar Scaling Issue with Internet Explorer

[pacamp]

Hi All,

I've been wrestling with this issue for a while now. On this site REMOVED, when the site is displayed on larger screen, the header gets all messed up (i.e. over 1200 width) with the turquoise background showing.

This occurs in Internet Explorer 7 so far that I can tell. However, this does not occur in Firefox. What could I be missing here? Any thoughts or comments would be greatly appreciated.

Larger IE window with the header not scaling correctly: REMOVED

Smaller Screen with everything looking normal: REMOVED

[newseed]

If you will notice, the header gets chopped off at the bottom when the site is viewed 1200px or higher. Your logo image was keeping all the other divs below until that logo gets so far out (1200px or more) away from that top nav that the nav slips up next to the image because there is enough room for it to thus the green background stops at the right of the logo and likewise on the other side.

 

To solved this, you will need to add height: 110px; to your #header. This will allow the all other divs to fall below the header thus allowing the green bar background to spread horizontally.

 

This will bring up a new problem. The right #sidebar-last needs to have clear: both; so that it will drop down into the #content div.

 

Some of the concept of html/css coding is a bit messy in which it can be done differently but this clear up your major issues.

Edited March 11, 2009 by newseed

[pacamp]

This is great feedback! Thanks.

 

That 'clear:both' is exactly what I needed. I'll have to remember that for the future.