Equalize HTML Elements using inline attributes (simple)

<!-- On page load... all these divs will be as tall as the tallest one. --> <div id="main"> <div id="menu" data-eqHeight="group1"></div> <div id="content" data-eqHeight="group1"></div> <div id="rightpanel" data-eqHeight="group1"></div> </div> <div id="footer"> <div id="footer_left" data-eqHeight="group2"></div> <div id="footer_right" data-eqHeight="group2"></div> <!-- footer_left and footer_right will also be as tal as the tallest one. --> </div>

Equalize HTML Elements per row (See example 3)

By adding attribute data-perRow you can group equalHeight into rows. <div id="products"> <!-- These three will be as tall as the tallest one among these three --> <div class="product" data-eqHeight="product" data-perRow="3"></div> <div class="product" data-eqHeight="product" data-perRow="3"></div> <div class="product" data-eqHeight="product" data-perRow="3"></div> <!-- These three will be as tall as the tallest one among these three --> <div class="product" data-eqHeight="product" data-perRow="3"></div> <div class="product" data-eqHeight="product" data-perRow="3"></div> <div class="product" data-eqHeight="product" data-perRow="3"></div> <!-- And so on... --> </div>

Equalize using javascript/jquery:

$(document).ready(function() { $(".class_to_equalize").equalHeight({ perRow: 0 // Default is 0 (All HTML Elements will be as tall as the tallest one) }); });