Scrolling Main Page Content Independently from Sidebar

Question

Our website's master page has a narrow column on the left with some menu options, and the page content taking up the rest of the space on the right.

I'm trying to determine the best way to allow page content to scroll independently from the left column.

I know I could create a scrollable div for the main content, but I would have to keep the height exactly the same as the browser window height to prevent the browser's main scrollbar from appearing. If I resized it with JavaScript, I believe there would be a delay as the window is resized, which would look a little cheesy.

Can anyone thing of a better way to structure the page to keep the left column stationary as the main page scrolls? (Note: It may be necessary to scroll the left column as well if it gets too tall.)

Page Layout http://www.softcircuits.com/Client/Layout.png

The image above shows the desired layout. I want the main content to scroll independently from the sidebar or header. But if I just make it a scrollable <div>, I can get two scrollbars right next to each other (one for the scrollable <div> and another for the main browser window).

Solution

You could position the left column fixed, so that it stays fixed to the window, while the rest of the page scrolls. For example,

.left-column {
  position: fixed;
}

Demo: http://jsfiddle.net/Yv3qX/

It's also possible to have it scroll independently itself, by positioning it from the bottom:

.left-column {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: scroll;
}

Demo: http://jsfiddle.net/Yv3qX/1/

Comments

[Jonathan Wood]

Thanks. Do you know why, in the second version, Chrome shows scrollbars around the left column even if there is no overflow?

[Christian]

Probably because I set the overflow to scroll, so it's expecting scrollbars. Are you on Windows or Linux? On OSX, there are no scrollbars (because they appear over the content), so it looks nice. You could always hide the scrollbars and use a plugin like lionbars.

[Jonathan Wood]

Okay, testing now. (I want the page to look good regardless of what browser they are using.)

[Christian]

Yeah, native scrollbars in anything but OSX are ugly. Lion got it so right by using the overlay scrollbar instead.