General

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.

Notes

• Created by: Michael Futreal
• Web Site: http://michael.futreal.com/
• Posted: October 20, 2008

Using the Plugin

The jQuery library is required.

A call to

$(".jqColumn").vjustify(); 

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.