Home/ Questions/Q 558985
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T12:11:22+00:00

I am having some problems getting this layout to work properly in IE (both

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0