I'm trying make a website with a similar design to this site http://johnaugust.com/2009/wherefore...not-mean-where

The two things I want is navigation fixed to the left, whilst content is scrollable vertically on the right.

I've tried this

html, body { height: 100%;}

.left {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 250px;
    float: left;
    height: 100%;
    background: url('../img/bg.gif') repeat;
    border-right: 10px solid #C9CACE;

.right {
    padding: 10px 10px 0 270px;
    border-top: 10px solid #C9CACE;
Which gives me the desired layout on desktop browsers, but on mobile the following layout changes take place (before and after the user zooms on mobile browser)


I've been trying to fix this for three solid days... This is my first site and I'm really running out of time. Any help at all is greatly appreciated.