Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Equalize column heights across multiple rows
JavaScript CSS
Tree: e9aabaa6ab

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


Features (Demo)

  • Equalize column heights across multiple rows (originally from this post)
  • Resize column heights when the page is resized. Can be disabled for fixed width layouts.
  • Choose between height (default), outer height or inner height.
  • Set a minimum or maximum height of a column, with an css class added when content overflows for additional styling



<!-- Required CSS styling, but do whatever you want with the overflow and other styling -->
  .overflowed { overflow: auto; }

<!-- Required script -->
<script src=""></script>
<script src="js/jquery.equalizer.js"></script>
$(function() {

Example HTML

<div class="wrapper">
  <div>Block 1</div>
  <div>Block 2</div>
  <div>Block 3</div>
  <div>Block 4</div>
  <div>Block 5</div>
  <div>Block 6</div>

Usage & Options (defaults)

// target the wrapper of all of the elements to equalize,
// in this case the divs inside of .wrapper
  // height = type of height to use
  // "o" or "outer" = "outerHeight" - includes height + padding + border + margin
  // "i" or "inner" = "innerHeight" - includes height + padding + border
  // default        = "height"      - use just the height
  columns    : '> div',     // elements inside of the wrapper
  useHeight  : 'height',    // height measurement to use
  resizeable : true,        // when true, heights are adjusted on window resize
  min        : 0,           // Minimum height applied to all columns
  max        : 0,           // Max height applied to all columns
  overflow   : 'overflowed' // class applied to columns that are taller than the allowable max

Change Log

Version 1.1 (1/12/2012)

  • Big change made in the plugin structure to better allow multiple instances.

    • Changed how the plugin is called. Call the plugin on the wrapper with the jQuery selector within the wrapper. The elements selected by the columns option will be equalized.

        // old format = $('.wrapper > div')
        // new format below
            // find divs that are the immediate children of the wrapper
            columns : '> div'
    • Added a method to resize the columns

        // initialize the plugin
        $('.wrapper').equalizer({ resizable: false });
        // update column heights on button click
          // use the data object
          // or call the plugin again, any new options will be ignored
          // $('.wrapper').equalizer();

Version 1.0.1 (7/14/2011)

  • Fixed a problem with adding headers, and headers with custom fonts, inside the blocks.
  • Added headers into the demo.

Version 1.0 (6/6/2011)

  • Initial build on Github
Something went wrong with that request. Please try again.