Question

Okay, so I’d like to use a layout that has three divs (laid out as columns). The outer two will be navigation related, so I’d like them to remain in place as the user scrolls. The middle part will house the content, so it will need to scroll normally with the page.

I know you’d usually use position:fixed, but I’d like the whole design to be centered on the page. Using fixed positioning won’t allow it to move horizontally like it should in a centered design. Anybody know of a way to meet all of that criteria?

I’ve setup a jsfiddle to get it started: http://jsfiddle.net/8RqEt/

Answer 1

Use position:fixed; left: 50%; margin-left: ??px on the outer elements:

http://jsfiddle.net/M5X7q/

• left: 50% centers the left edge of each element to the page: http://jsfiddle.net/M5X7q/1/
• Then, the correct amount of margin-left places each element where it needs to be.