By Michael Futreal on Oct 20, 2008


Unequal column heights make CSS layouts difficult to manage when the height of content cannot be known in advance, particularly in scenarios where absolute positioning is in use. While there are a variety of strategies to deal with this issue, here’s a jQuery-based fix.


Using the Plugin

The jQuery library is required.

A call to


will do the trick, assuming you’ve assigned class="jqColumn" to all elements needing vertical justification. Use of the plugin assumes that the browser is able to determine the height of all elements at .vjustify() runtime, which can be a problem in certain scenarios. See the warning below.

Obviously, you can apply .vjustify via any jQuery mechanism for objectifying elements.

Issues and Warning

In Firefox 2.0, at least, $(document).ready() functions are executed before images are actually loaded. In other words, Firefox seems consider the DOM ready for scripting prior to a complete load.

The upshot of this is that any use of vJustify plugin within a $(document).ready() context (a typical jQuery convention) may get the wrong height of any blocks that contain <img> elements that don’t explicitly specify their height attribute. .vjustify() works fine in contexts where the height is specified (or known because all elements have fully loaded).

Find out more about this issue and a work around.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: vjustify.js


Paste this code into the HEAD section of your HTML document.