Seeing the structure of your HTML I would just simply include your nav (left-div) inside of your container (right-div). Remove both max-height properties and float both divs to the left. Be very sure to set a clear:both on the footer div's css so you can be sure no overlapping will happen.

You would certainly benefit from using a responsive framework for your project. It would save you a good amount of headaches. However, seeing the structure of your HTML I would do the following:

Please check the example: http://jsfiddle.net/xLA4q/

HTML:

<div class="nav-content-wrapper"> <div class="left-nav">asdasdasd ads asd ads asd ad asdasd ad ad a ad</div> <div class="content">asd as dad ads ads ads ad ads das ad sad</div> </div> 

CSS:

.nav-content-wrapper{position:relative; overflow:auto; display:block;height:300px;} .left-nav{float:left;width:30%;height:inherit;} .content{float:left;width:70%;height:inherit;}