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

css, height, html, siblings

Solution

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

Problem

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?

Original source