How to float left content and fix right content?

Question

I am working on a structure to have a top navigation fixed, a left nav to be scrollable and a right nav to be fixed.

I have created a fiddle here. just need help with the css.

http://jsfiddle.net/PxbX9/

#header {
    position:fixed;
    background:red;
    width:700px;
    height:30px;
}
#left-block {
    float:left;
    width:350px;
    background:blue;
    height:1000px;
    margin-top:30px;
}
#right-block {
    float:left;
    width:350px;
    height:1000px;
    background:pink;
    margin-top:30px;
    .fixed-block {
        postion:fixed;
        height:1000px;
    }

Answer 1

This can be achieved by restructuring your CSS to this:

#header {
    position:fixed;
    background:red;
    width:700px;
    height:30px;
}
#left-block {
    float:left;
    width:350px;
    background:blue;
    height:1000px;
    margin-top:30px;
}
#right-block {
    display: inline-block;
    float:right;
    width:350px;
    height:1000px;
    background:pink;
    margin-top:30px;
    position:fixed;
}

I've only made CSS changes to the #right-block selector.

1. Removed the class .fixed-block, which had a typo in the form of postion (should be position).
2. position: fixed; has been added to the #right-block selector.
3. display: inline-block; and float: right; have been added also.

DEMO

Hope this helps.