divbalance
A jQuery plugin for balancing column heights in fluid layouts.

divbalance is a jQuery plugin which will balance the heights of multiple columns in fluid layouts and other html structures.

Options include:

How to Use

  1. Download the latest version of divbalance and jQuery.
  2. Setup the script in the <head> section of your html:
    <head>
    .....
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/jquery.divbalance.js"></script>
    .....
    </head>
    
  3. Add the class "row" to each row that will require balancing or use an optional row class:
    .....
    <div class="row">
    .....
    
  4. Add the class "column" to each column that will require balancing or use an optional column class:
    .....
    <div class="row">
    <div class="column onecol">
    .....
    
  5. Add the execution code to the <head> section of your html:
    <script type="text/javascript">
     $(document).ready(function() { /* Begin Document Ready */
      $(window).load(function () {
       $(this).divbalance(
        {
         'rowclassname' : '.row', // valid jquery selector
         'columnclassname' : '.column', // valid jquery selector
         'minheight' : 250, // sets the minimum height of each row
         'bottomspace': 10 // added to the height of each
       });
      });
     });
    </script> 
    

Examples

Simple 2 column example

Simple 4 column example with changes to row name, column name, minimum height and bottom spacing

Grid example

FAQ

Download