Specific CSS layout with fixed elements and several scroll bars

For the last days I had some issues with a specific layout I want for a website. I have added an image to explain the layout and also some CSS code I have been trying out with below. I tried using floating layout, absolute positioning and all kinds of combinations to fix the layout but I can't seem to get it right. I hope any of you guys could help me out with this.

Here is the layout image:

Specific CSS layout with fixed elements and several scroll bars
Specific CSS layout with fixed elements and several scroll bars

Here is the CSS code:

html, body {
    overflow:hidden;
}

* {
    margin:0;
    padding:0;
}

.header {
    background-color:#CCC;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:40px;
}

.wrapper {
    position:absolute;
    width:100%;
    top:40px;
    bottom:40px;
}

.left {
    float:left;
    overflow-y:scroll;
    width:30%;
    min-width:300px;
    height:100%;
}

.right {
    float:left;
    overflow-y:scroll;
    right:0;
    width:70%;
    height:100%;
}

.footer {
    background-color:#000;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    min-width:500px;
    height:40px;
}

Is this what you wanted? DEMO

REMOVE

.wrapper
{
    position:absolute;
    width:100%;
    top:40px;
    bottom:40px;
}

.left
{
    float:left;
    overflow-y:scroll;
    width:30%;
    min-width:300px;
    height:100%;
}

.right
{
    float:left;
    overflow-y:scroll;
    right:0;
    width:70%;
    height:100%;
}

REPLACE WITH

div.left,
div.right {
    display:inline;
    float: left;
    position: relative;
    height: 100%;
    overflow-y: scroll;
}

.left {
    width: 30%;
}

.right {
    width: 70%;
}

UPDATE DEMO

*
{
    margin:0;
    padding:0;
}

div.wrapper {
    width: 100%;
    min-width: 600px; /* If the window gets bellow 600px .left will stay 30% of 600 and .right will stay 70% of 600*/
}

div.left,
div.right {
    display:inline;
    float: left;
    position: relative;
    height: 100%;
    overflow-y:scroll;
}

.left {
    width: 30%;
    background: red;
}

.right {
    width: 70%;
    background:green;
}

.header
{
    background-color:#CCC;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:40px;
}

.wrapper
{
    position:absolute;
    width:100%;
    top:40px;
    bottom:40px;
}

.footer
{
    background-color:#000;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    min-width:500px;
    height:40px;
}​​​