Expanding Elements

One of the most oft-heard complaints about CSS is that there's no way to expand an element so that it matches the height of another column.

Here's a fairly standard layout you'll see on a lot of websites.

In the bad ol' days of table based design, this was fairly easy to achieve, but of course we're all trying to avoid tables and use CSS for our layout. However, there's no easy way to get CSS elements to expand vertically to match other elements, so what we're often left with is

Various solutions have been put forward, but I've never been really happy with them; they've needed horrible hacks, extraneous divs or spans, not worked well with most browsers and so on.

So now, here's another possible solution. It uses javascript & DOM to manipulate the elements of the page and has been tested with various versions of IE, Firefox, Opera, Netscape and Safari - download the file here

Compared with other methods, this script has the advantage that it doesn't require additional containers such as div's. You simply specify which element you want to use as the reference by giving it a class of 'tallest'- for example, in the above layout we'd want to use the main content, so we'd define the element as

If you aren't sure which element will be tallest, simply give the class 'tallest' to all of the possible elements - the script will decide which is the tallest (tallest is defined as which one reaches to the lowest point on the page).

We'd then define the element we want to expand with the class of 'expand-me', for example:

Finally, to expand the element, we add a call to the javascript just before the closing tag as below

expandElements();

Technical Explanation

The code that expands the elements is shown below:


function expandElements() {
if (!document.body)
return;

tallest = getElementsByClassName(document, "*", "tallest");
if (tallest.length < 1)
return(0);

// find bottom of tallest element
maxBottom = 0;
for (index = 0; index < tallest.length; index++) {
tallestBottom = tallest[index].offsetHeight + tallest[index].offsetTop;
if (tallestBottom > maxBottom)
maxBottom = tallestBottom;
}

/*
* Ok, so we've found the tallest element - now find the elements we need to expand
*/
expanders = getElementsByClassName(document, "*", "expand-me");

for (expandIndex = 0; expandIndex < expanders.length; expandIndex++) {
expanding = expanders[expandIndex];

/* expanding now points to one of the elements that we need to expand.
* First of all we need to work out what the padding for the element is,
* since we need to include this in the height calc.
*
* The easiest way of doing this is to find the height of any content in
* the element, and subtract that from the height of the element.
*/

childHeight = 0;
for (index = 0; index < expanding.childNodes.length; index++) {
if (expanding.childNodes[index].offsetHeight)
childHeight += expanding.childNodes[index].offsetHeight;
}
paddingHeight = expanding.offsetHeight - childHeight;

/* Now that we know the height of the element, and we know the position of
* the bottom of the tallest element, we can calculate how much to increase
* the height of our expanding element.
*/

expanding.style.height = maxBottom - expanding.offsetTop - paddingHeight + "px";
}
}

lines 2 & 3 simply check that we can access the DOM model.

lines 5-7 check that there is at least 1 element with the class 'tallest'

lines 9-15 cycle through all of the elements with a class of 'tallest' to find which has the lowest bottom on the page.

The remaining lines cycle through any elements with a class of 'expand-me'. As an element is found, the height is adjusted so that the bottom of the element matches the bottom of the 'tallest' element.

Anyway, hope you find this useful - and obviously let me know if you have any comments.