Help with layout problems in IE

Question

I am having some problems getting this layout to work properly in IE (both 6 and 7). It, of course, works fine in Safari and Firefox.

What's going on here:

• I have a footer which is fixed to the bottom of the viewport, or under content - whichever is longer.
• I have a header above the content which contains a number of centered and floated block items, which is wider then the content area.
• I have a centered fixed width content area

The problems

• (Main problem) In IE7 a horizontal scroll bar appears because of the floated header.
• In IE6 the footer does not snap below content area.

Any insight would be great. Thanks.

Answer 1

I see you're positioning the footer by making layout extend the full height and then giving it a negative bottom margin to shift the footer up . . . perhaps getting rid of the negative margin and using relative positioning on the footer to shift it up would be more cross-browser compatible.

I haven't actually tried this out with your page, it's just a thought.

UPDATE: Turns out position: relative isn't all that great . . . it makes the scrollbar extend to where the footer would have been without the repositioning.

But try applying #footer{position: absolute; bottom: 0px; width: 100%} and get rid of the negative bottom margin of layout . . . this works for me at least in Firefox, I haven't yet checked IE.