Question

I’m trying to figure out a way to make three floating divs match the height of the largest floating div of the three (which, via the clearfix solution, is the height of their container).

My question is exactly like this question, only my question needs the requirement that the comments to the answer overlook 🙂 (“what if the two columns have different background colors?” etc)

So really I can’t fake it. The page uses a drag & drop mechanism similar to iGoogle using scriptaculous, and the dragdrop sortable containers are the floating divs. It would make things a lot easier for the user if I can force all containers to be the same height.

The more I look for solutions, the more it looks like it can’t be done with pure CSS. If that’s the case and I need to use some javascript, so be it.

Thanks in advance.

EDIT: The link from idrumgood was a solution, but not the solution I ended up using. I ended up porting the jQuery function he suggested to prototype in order to avoid conflicts and to avoid having to load the entire jquery library for one function.

This is the javascript function port that I ended up using:

    function equalHeights(container) {
    var children = $A(container.immediateDescendants());
    var currentTallest = 0;

    for (i = 0; i < children.length; i++) {
        if (children[i].getHeight() > currentTallest) {
            currentTallest = children[i].getHeight();
        } //end if
    } //end for

    for (i = 0; i < children.length; i++) {
        children[i].setStyle({ height: (currentTallest + 'px') });
    } //end for
} //end equalHeights

Answer 1

If you’re ok with javascript/jQuery, here’s the solution I would use.