In a sequence of sibling divs, can you set the height to the highest value?

Question

So you have a set of inline divs. Their width is hard coded but the content inside can be changed meaning the height of the divs are different.

Is there any way to enure that all divs remain the same height, without having the danger of content spilling out its parent div?

I've tried inheriting min-height but it seems that this is not dynamic. So if the parent div has a min-height set to 320px and the sibling divs are inheriting this value, if any sibling were to become higher than 320 because of content, it and the parent div will change, but the other siblings will stay at 320.

Is there any way around this without the use of anything other than css?

Answer 1

Simply make use of CSS' table display.

Take the following example markup:

<div>
    <figure>Example one</figure>
    <figure>This is example twooooo</figure>
    <figure>3</figure>
</div>

If you want all three figure elements to remain a constant height whilst ensuring they never escape outside the boundaries of the div container, simply:

div {
    display:table;
}

div > figure {
    display:table-cell;
}

All three figure elements will now remain the same height - the height of the element with the most content or the min-height of the containing divider, whichever is greater.

Here's a JSFiddle example showing this in action. Notice how I've given the div a grey background colour and that the figure elements never escape outside the boundary.

For browser support, see: http://caniuse.com/#feat=css-table