Макет с фиксированным верхним и нижним колонтитулом, боковой панелью фиксированной ширины и гибким содержимым

Я пытаюсь настроить макет, который будет выглядеть так:

Я хочу использовать twitter bootstrap для проекта, но я понимаю, что это может быть не лучший способ для базового макета, который выглядит так. Я знаю, как настроить верхний и нижний колонтитулы так, чтобы они были зафиксированы вверху и внизу, но мне трудно иметь постоянную ширину боковой панели и независимо прокручивать ее.

Моя текущая реализация находится здесь: http://jsfiddle.net/Mwkrw/3/.

Я попытался настроить фиксированную боковую панель, используя Фиксированную навигацию по боковой панели в Fluid twitter bootstrap 2.0и пару других подобных ответов на переполнение стека, но все они ломаются, когда боковая панель длиннее содержимого и как насколько я знаю, нет никакого способа дать ему независимый свиток.

В идеале я хотел бы сделать это на чистом css — без javascript. Я уверен, что это возможно, и именно недостаток навыков и знаний мешает мне сделать это правильно, поэтому нет смысла добавлять ненужный код javascript. (Я все еще добавляю тег javascript на случай, если это невозможно)

Спасибо за помощь!

РЕДАКТИРОВАТЬ: Таким образом, мой заголовок явно не нуждался в фиксированной позиции. Вот новая и улучшенная версия: http://jsfiddle.net/Mwkrw/4/Однако я все еще борюсь с двумя прокручиваемыми элементами div.