Search code examples
javascripthtmlcssmootools

Giving inline-block elements with variable content the same height?

I have 4 inline-block elements with fixed width but variable content, and I want all of these elements to have the same height - that of the largest element. Please see This jsfiddle.

How should I achieve this? If its not possible to do it using only css, what is the right way to do it using javascript?

Solution

  • probably better to make it modular and reusable, in mootools, you can prototype a HTML collection:

    Elements.implement({
    setEqualHeight: function(height) {
        height = height || Math.max.apply(Math, this.map(function(el) { 
            return el.getSize().y 
        }));
        this.setStyle("height", height);
    }
});

// use tallest as height for all
document.getElements("div.equals").setEqualHeight(); 
// or hardwire all to 500...
document.getElements("div.equals").setEqualHeight(500);

    fiddle. http://jsfiddle.net/TxtBQ/2/

    and with your ul/li: http://jsfiddle.net/kKZXj/8/

    works on anything, they don't even need to be close to each other