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

Code:
html, body { height: 100%;}

.left {
    position: fixed;
    height:100%;
    left:0;
    top:0;
    bottom: 0;
    right: 0;
    width: 250px;
    float: left;
    right:0;
    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)

http://imgur.com/a/NKc1v

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.