title: Flowing layout with stacked divs
body: <p>I'm trying to build a website with two columns. The left column has two divs, and the right column has four divs. Each of the divs can have any height. A vertical scrollbar should never appear on the main body; only on the individual divs in either column. Each of the divs should be as small as possible without scrolling until they take up all the vertical space in their column. In that case, the div with the most content starts scrolling first, the div with the second-most content starts scrolling second, etc.</p>
  
  <p>A CSS layout would be ideal, but jQuery works great as well.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I'm looking for it to do something like this: <a href="http://jsfiddle.net/CkgxD/" rel="nofollow">http://jsfiddle.net/CkgxD/</a>. (Resize the window vertically to get an idea.) I have a Javascript solution now that is... more complex than I was hoping for. Feel free to call out any bad practices, code smells, etc. -- I'm still new to web development.</p>