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.
- 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
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.
Paste this source code into the designated areas.
Paste this code into the
HEAD section of your HTML document.