Creating the effect of equal height columns is a trivial task with jQuery. CSS doesn't provide a direct method to get this effect, though there are some workarounds available on the web. Basically, what we want to achieve is simple: two columns whose height stretches on the entire page's height. jQuery provides a simple method for this: height(). With this method, we can obtain the global height of every element on the page. In this case, what we want is the overall height of the page's viewport, so we apply this method to the window object, like so:
$(document).ready(function() {
var winHeight = $(window).height();
$('#main, #content-sub').css('height', winHeight);
});
After getting the viewport's height, we set its value with the css() method on our two columns. You can see the final result here.
Improvements
You can apply this method to every element on the page, also including the document object. In this case, all you have to do is to perform some calculations with the height of other page elements. For example, if there's a footer at the bottom of the page, you have to subtract its height from the global height you're going to apply to the columns.