Fix CSS 2 column height problem with jquery

Take a look for “normal” CSS 2 column example here.

Normal CSS 2 Column

Now, the question is “What if the main/leftside is shorter than the sidebar?”, then you’ll get something like this.

CSS 2 Column Different Height

That’s the problem, the div (left and right) doesn’t know and cover each other, it’s different with Tables layout. But don’t worry, it can be fix with little jQuery trick by compare each side height.

Here’s the code:

<script language=”javascript”>
$(document).ready(function() {

// CSS height fix
var left = $(“div#main”).height();
var right = $(“div#sidebar”).height();

if(left > right)
$(“div#sidebar”).height(left);
else
$(“div#main”).height(right);

});
</script>

The final result is here.

CSS 2 Column jQuery Fix