equalize.js

The jQuery plugin for equalizing the height or width of elements

Created by Tim Svensen

How to Use

Call the plugin on the parent of the elements to equalize their height.

$('#height-example').equalize();

Equalize will accept any of the jQuery Dimension methods: height, outerHeight, innerHeight, width, outerWidth, innerWidth.

$('.parent').equalize('height'); // default, same as above
$('.parent').equalize('outerHeight');
$('.parent').equalize('innerHeight');
$('.parent').equalize('width');
$('.parent').equalize('outerWidth');
$('.parent').equalize('innerWidth');

Advanced Usage

Equalize will now accept a settings object to get the "minimum max dimension". By setting reset to true the height/width will be removed before determining the max. See the advanced example below.

$('.parent').equalize({reset: true}); // default to height
$('.parent').equalize({equalize: 'width', reset: true});

This advanced usage is for dynamic instances where equalize is ran after elements are added or removed to maintain minimum max height or width.

Equalize the .parent's child element. See @larsbo's example.

$('.parent').equalize({children: 'p'}); // equalize height of paragraphs within .parent

Height Example run »

$('#height-example').equalize(); // defaults to height
equalize
equalize content height
equalize
equalize
equalize
equalize content
equalize
equalize
equalize content height
equalize

Width Example run »

$('#width-example').equalize('width');
Example
equalizing
the
width

Advanced Example run »

$('#height-example').equalize({reset: true});

Below the tallest div has a height of 200px, this will be removed before determining the max height, otherwise all elements would have a height of 200px.

equalize
equalize content height
equalize
equalize
equalize
equalize content
equalize
equalize
equalize content height
equalize