title: Independent column scroll in HTML page
body: <p>I have two columns in my HTML page. </p>
  
  <pre><code>&lt;div id="content"&gt;
    &lt;div id="left"&gt;&lt;/div&gt;
    &lt;div id="right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Each of them occupies half of the page</p>
  
  <pre><code>#left {
      float: left;
      width: 50%;
  }
  
  #right {
      float: left;
      width: 50%;
  }
  </code></pre>
  
  <p>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.</p>