1

Possible Duplicate:
CSS: fixed position on x-axis but not y?

I have a HTML page which is supposed to scroll horizontally which has a fixed position header tag.

In the case that a vertical scrollbar appears (resize window) I want the header to scroll relative with the rest of the content.

Can anyone think of a possible non-javascript solution?

Community
  • 1
  • 1
George Reith
  • 13,132
  • 18
  • 79
  • 148

1 Answers1

3

Fixed position has pretty lousy support on iOS devices. Instead of using a fixed position for your header, you should leave it static on the page. Surround your content you want to scroll horizontally with a container with overflow: auto, so that the content scrolls rather than the entire page.

Preview: http://jsfiddle.net/Wexcode/vfZjb/

Wex
  • 15,539
  • 10
  • 64
  • 107
  • That's a good idea, and this site is being designed mainly for tablet screens so the iOS information was very helpful. – George Reith Dec 29 '11 at 21:34
  • 1
    Be wary that using this technique will not allow the user to scroll horizontally unless their cursor is hovering over the container that contains your overflowed content. This may prove problematic in a design that doesn't reach the top or bottom of the page. You might want to look into techniques that force your content container to have a minimum height of 100% of the browser size to negate this problem. – Wex Dec 29 '11 at 21:40
  • You strike again... decided to create a viewport div to use as a wrapper which is always fullscreen and creates the illusion you are scrolling the page, but doesn't break when you resize the height too small. – George Reith Dec 29 '11 at 21:59
  • Good idea! Best of luck to you on your site. – Wex Dec 29 '11 at 22:06