Centering a fixed element, but scroll it horizontally

Question

Having some issues getting this to work. PLEEEEEEASE help.

I would like an element fixed to the top of the viewport, when the user scrolls down the page it remains at the top of the viewport... easy. If the window is narrower then 960px the horizontal scrollbars appear. If the window is scrolled horizontally I would like the content inside this fixed element to scroll with it.

Please check out the demo, the two green boxes should always line up. Make your window narrow and scroll horiz, notice how they no longer line up.

Is this possible without JavaScript? Should work in IE7+ and not totally break in IE6.

http://www.louiswalch.com/beta/t/_scrolltest4.html

Answer 1

Ah, interesting question. I don’t think you can achieve that without JavaScript.

position: fixed means that the element is positioned relative to the viewport. You want that vertically, but you don’t want it horizontally. I don’t think there’s any way to achieve that in CSS.