title: Layout with fixed header and footer, fixed width sidebar and flexible content
body: <p>I'm trying set up a layout that will look like this:
  <img src="https://i.stack.imgur.com/eSSfS.png" alt="enter image description here"></p>
  
  <p>I want to use twitter bootstrap for the project, but I understand it may not be the best way to go for the basic layout that looks like this. I know how to setup the header and footer to be fixed at the top and bottom, but I have a hard time having my sidebar constant width and independently scrollable.</p>
  
  <p>My current implementation is here: <a href="http://jsfiddle.net/Mwkrw/3/" rel="nofollow noreferrer">http://jsfiddle.net/Mwkrw/3/</a>.</p>
  
  <p>I tried setting up the fixed sidebar using <a href="https://stackoverflow.com/questions/9350818/fixed-sidebar-naviagion-in-fluid-twitter-bootstrap-2-0">Fixed sidebar navigation in fluid twitter bootstrap 2.0</a> and a couple of other similar answers on stack overflow, but they all break when the sidebar is longer than the content and as far as I know there is no way to give it an independent scroll.</p>
  
  <p>I would ideally like to do this with pure css - no javascript. I'm sure it's possible and it's my lack of skill and knowledge that prevents me form doing it properly, so there may be no point in unnecessarily adding javascript code. (I'm still adding a javascript tag in case it's not possible)</p>
  
  <p>Thanks for all the help!</p>
  
  <p>EDIT: So my header clearly did not need to be position fixed. Here is the new and improved version: <a href="http://jsfiddle.net/Mwkrw/4/" rel="nofollow noreferrer">http://jsfiddle.net/Mwkrw/4/</a> I'm still struggling with the two scrollable divs though.</p>