Equal-Height Layout Solutions

In front-end web development, we often encounter the need for equal-height layouts. The most intuitive approach is to set all elements within a container to float or inline-block.

float and inline-block

When using float for layouts, not only do you have to expand the parent container (clearfix), but you also have to configure margins for child elements. As a result, as soon as there is too much content or not enough height, the layout breaks.

Furthermore, the biggest flaw of this layout approach is that you must set a fixed height.

What if you don’t set a height? Even if you set a min-height, it’s the same story: once the content exceeds that height, you will inevitably face the danger of overflow.

Later, I decided to directly use CSS media queries to apply different heights at different screen widths. Although this solution is rather cumbersome and a bit ugly, it did solve the issue of layouts breaking when the viewport gets too narrow.

This problem remained buried deep in my mind until recently, when I discovered the magic of flexbox.

When layout gets tough, think flexbox first

When life gives you setbacks, think of flexbox—this flexible box will often save your day. Flexbox is already supported by most mainstream browsers, and it’s truly fantastic to use!

When you set display to flex, if no height is specified on the child elements, their heights will automatically match whichever one is the tallest.

A single CSS property solved the problem I had been agonizing over for so long—such elegance in flex.

However, beyond that, we still need to make a few adjustments to the layout. By default, if flex-wrap is not specified, flexbox stretches the parent container in a single line. Therefore, we can add one more line:

.wrap {
  flex-wrap: wrap;
}

And just like that, an equal-height responsive layout without declaring any height is complete. The CSS will look roughly like this:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.card {
  height: auto;
  width: 30%;
  border: 1px solid #aaa;
}

What about browsers that don’t support flexbox?

First of all, flexbox is already supported across most modern browsers, so don’t use compatibility as an excuse to ignore something as great as flex. However, if a browser really doesn’t support it, you can achieve the layout using JavaScript. The core principle is to avoid setting heights upfront, detect all elements inside the container, find the one with the maximum height, and apply that height to every element.

Here is a very basic example:

var cards = document.querySelectorAll(".card")

function getMaxinumHeight(elements) {
  var nums = []

  elements.forEach(function(value) {
    nums.push(value.offsetHeight)
  })

  return nums.sort(function(a, b) {
    return a < b
  })[0]
}

var maxHeight = getMaxinumHeight(cards)
cards.forEach(value => {
  value.style.height = maxHeight + "px"
})

Table is the new sexy

Although old-school table-based layouts have been widely shunned, for scenarios like equal heights where you unfortunately cannot use flexbox, you can leverage table properties to achieve an equal-height layout.

To build a table layout, you can use display: table, display: table-row, and display: table-cell.

display: table is equivalent to <table>; display: table-row is equivalent to <tr>; and display: table-cell is equivalent to <td>.

Even though this achieves the equal-height effect, the HTML markup becomes more complex. Furthermore, tables still come with constraints—for example, margins do not work inside table elements—which present significant hurdles when building out mockups. So, whenever possible, stick with flexbox!

Further Reading

Flexbox responsive equal height