Fixed panels while scrolling on a centered design

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/

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.

I know you have your answer, but I wanted to improve upon my answer a bit for anyone else looking to solve something similar.

How 'bout this:

http://jsfiddle.net/M5X7q/6/

It scrolls the middle, fixes the blues, and triggers the scrollbars, plus it reduces the flicker I noticed in the fiddle just before your last note.

This uses a jquery plugin solution (I just corrected it to handle this case). Not much js needed to accomplish this.

Here is the usage:

$(document).ready(function() {
    $('.blue-1').scrollToFixed();
    $('.blue-2').scrollToFixed();
});

Here is a link to the plugin and its source:

https://github.com/bigspotteddog/ScrollToFixed