Monday, June 6, 2011

Equalizer

This script was first written by Stephen Akins to equalize column heights in multiple rows. Chris Coyier of CSS Tricks then posted an update which allowed the heights to adjust while resizing a page. I simply debugged, added a few improvements (like minimum and maximum height, an idea from Mike Avello's plugin) and turned it into a plugin.


In the screen shot above, there are three blocks containing three columns. The three blocks have identical HTML. The left block is unmodified. The center block has Equalizer applied with a max height setting; and each block that exceeds the max height has a css class applied which sets the overflow to auto and adds the different background color for the demo, but you can do whatever you want via the css. And the right block has Equalizer applied with a minimum height setting; you should be able to see in the screen shot that the middle row of the right block has a minimum height set.

Try out the demo, resize your browser window and see how everything changes.