Independent column scroll in HTML page

Question

I have two columns in my HTML page.

<div id="content">   <div id="left"></div>   <div id="right"></div> </div> 

Each of them occupies half of the page

#left {     float: left;     width: 50%; }  #right {     float: left;     width: 50%; } 

Is it possible to make it so that they flow independently? I mean, I want to be able to scroll down the left column, but remain at the top of the right column, instead of having to scroll down both columns at the same time.

Answer 1

See this fiddle

#content, html, body {     height: 98%; } #left {     float: left;     width: 50%;     background: red;     height: 100%;     overflow: scroll; } #right {     float: left;     width: 50%;     background: blue;     height: 100%;     overflow: scroll; } 

Answer 2

The earlier postings improved a little:

• 100% html and body size .... without scroll bar
• margins for the left and right boxes
• individual scrollbars only when needed ("auto")
• some other details: Try it!

Fiddle: 2 independently scrolling divs

html, body {   height: 100%;   overflow: hidden;   margin: 0; } #content {   height: 100%; } #left {   float: left;   width: 30%;   background: red;   height: 100%;   overflow: auto;   box-sizing: border-box;   padding: 0.5em; } #right {   float: left;   width: 70%;   background: blue;   height: 100%;   overflow: auto;   box-sizing: border-box;   padding: 0.5em; }