title: Scrolling Main Page Content Independently from Sidebar
body: <p>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.</p>
  
  <p>I'm trying to determine the best way to allow page content to scroll independently from the left column.</p>
  
  <p>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.</p>
  
  <p>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.)</p>
  
  <p><a href="http://www.softcircuits.com/Client/Layout.png" rel="nofollow noreferrer">Page Layout http://www.softcircuits.com/Client/Layout.png</a></p>
  
  <p>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 <code>&lt;div&gt;</code>, I can get two scrollbars right next to each other (one for the scrollable <code>&lt;div&gt;</code> and another for the main browser window).</p>