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

Question

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?

Answer 1

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

Answer 2

You can apply a height and overflow style to the <li> elements

height: 200px;
overflow: auto;

http://jsfiddle.net/kKZXj/1/

---

may not be exactly what you're looking for with using the largest element as the height.

Another way to do this would be use a <table> element and each cell would give you the desired effect.

http://jsfiddle.net/kKZXj/3/