Horizontal Scrolling Layout

[darrenbond]

Hi all,

I'm putting together a horizontal scrolling website for a friend.

So far, I have managed to fix the header in place, create a content area that is centred in the visitors browser, and use some javascript to smooth the movement between the content areas.

When the content grows further down the page you can, as you'd expect, scroll down to view the rest of the content. However, the content then scrolls over the top of my fixed header.

Is it possible to have the header scroll vertically along with the content instead of it overlapping, while retaining the header in its fixed position?

I tried replacing the 'fixed' header property with 'absolute'; but then the header wouldn't stay in place when scrolling horizontally to the other content sections.

As you can tell, I'm very new to CSS and would really appreciate some help and advice.

 

[PixelPusher]

You had it right the first time, use the "fixed" position. The attribute you are missing is the z-index. In the world of web dev, you have 3 planes/coordinates: x,y,z.

X: left to right
Y: top to bottom
Z: front to back (like layers in photoshop)

"z-index" can only be applied to elements with relative, absolute, or fixed positions. By default all items positioned items have a z-index of 1. For more info on z-index check out w3schools

So to fix your issue do this:

1. add {z-index:3;} to your header
2. if you dont have it already, add {position:relative;} to your main content holder