jQuery Plugin to Make Column Heights the Same Size

jQuery Pluginequalize_column_heights is a simple jQuery plugin that will make a series of columns have the same height. This is useful for multi-column web page layouts where you want a series of columns to all have the same height. The plugin determines the height of the tallest column and then makes all the columns in the specified group the same height. This works even as content is added to the columns that increase or decreases the max height.

How it works:

  1. Place the columns that should have the same height inside a parent DIV and assign it an ID (ie <div id=”column-group”>).
  2. Add a CLASS attribute to the DIV for each column (ie class=”equalize”). Class attributes can have multiple attributes so it can also be added to the class if other attributes are already there (ie <div class=”center-col equalize”>).
  3. Include the plugin script after the include for jQuery  (ie <script type=”text/javascript” src=”scripts/equalize_column_heights.js”></script>).
  4. The function is added to an id selector and has a single parameter for the class name that identifies which columns to adjust.
  5. Add the function to an id selector in your main script:

<script type=”text/javascript” src=”scripts/equalize_column_heights.js”></script>

<script type=”text/javascript”>

$(document).ready(function() {

$(“#column-group”).equalize_column_heights(“equalize”);

});

</script>

Demo | Download Plugin

DLL Written by: Don Lyckman
Don Lyckman is a Web Developer/Designer
CSS, Javascript, jQuery

If you enjoyed this post, please consider leaving a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

5 Responses to “jQuery Plugin to Make Column Heights the Same Size”

Leave Comment

(required)

(required)