Web Dev Notes

Blog about web development by Robert Dawson

How to make HTML elements the same height

See how the "Read more." links at the bottom are horizontally aligned on this page?

Below is how I did it. Note that the elements variable is an array to let you equalize differently identified elements (e.g., [".div1", ".div2"]).

function setSameHeight(elements) 
{
var heights = new Array();
for (e = 0; e < elements.length; e++)
{
heights[e] = $(elements[e]).height();
}
var tallest = Math.max.apply(Math, heights);
for (e = 0; e < elements.length; e++)
{
$(elements[e]).height(tallest);
}
}

var elements = [".sqs-block.summary-block"];
setSameHeight(elements);