how to divide web page into different sections which scroll independently

1#content, html, body {
2    height: 98%;
3}
4#left {
5    float: left;
6    width: 50%;
7    background: red;
8    height: 100%;
9    overflow: scroll;
10}
11#right {
12    float: left;
13    width: 50%;
14    background: blue;
15    height: 100%;
16    overflow: scroll;
17}
18