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).

Answer 1

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/