My goal is to create a website layout with two columns. The left column will contain two divs, while the right column will have four divs. Each div can vary in height and should not trigger a vertical scrollbar on the main body; only within each individual div. I want the divs to be as compact as possible without requiring scrolling until they fill up the entire vertical space within their respective columns. When this occurs, the div with the most content should begin scrolling first, followed by the div with the second-most content, and so on.
An ideal solution would involve CSS styling, although jQuery could also work effectively.
EDIT
I envision something similar to this example: http://jsfiddle.net/CkgxD/. (Try resizing the window vertically for a better understanding.) Currently, my JavaScript approach seems more complicated than I had hoped for. Please point out any potential issues, bad practices, or code smells – as I am still relatively new to web development.