Methods for equal height columns

Updated for 2021, my original post on this was in 2017 and can be found on CodePen.

A few years ago, while looking over a competitor’s newly designed website, I saw they were using float and an after pseudo selector to make equal height columns. This got me to thinking about all of the different ways that you can make an equal height column layout.

Using :after and float

This is the method I mentioned earlier. It’s not something I have used before and is pretty unnecessary now with flex and grid. The purpose of it seems to have been meant more for vertically centering than making the columns equal height.

Pros

Cons

The HTML

The HTML is a typical grid layout of rows and columns. Very similar to what you would see in older version of Bootstrap.

<div class="row">
  <div class="col">...</div>
  <div class="col">...</div>
</div>
<div class="row">
  <div class="col">...</div>
  <div class="col">...</div>
</div>

The CSS

For the CSS you have a row with a clearfix. Then the column will have a max-height and the col’s &:after pseudo selector has padding 100%.

.row:after {
  content: "";
  display: table;
  clear: both;
}
.col {
  max-height: 300px;
  float: left;
  position: relative;
}
.col:after {
  content: "";
  display: block;
  padding-top: 100%;
}

Working Example

Not something I would recommend using anymore, now that flex and gid work everywhere

Table-Cell

This was one of my personal gotos before using starting to use flex and grid. It is fairly easy to work with and at the time I used it had solid browser support in older versions of IE, while I still needed to support that.

Pros:

Cons:

The HTML

The HTML is the same as using the :before method.

<div class="row">
  <div class="col">...</div>
  <div class="col">...</div>
</div>
<div class="row">
  <div class="col">...</div>
  <div class="col">...</div>
</div>

The CSS

The CSS is simple. The .col class is given the display: table-cell property. Then set the width you would like.

.col {
  width: 50%;
  height: 100%;

  display: table-cell;
}

Working Example

Not something I would recommend using anymore, now that flex and gid work everywhere

Flex

Pros:

Cons:

The HTML

No need for a lot of wrappers/containers. We just need a parent wrapping all the columns.

<div class="grid">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

The CSS

On the parent container, .grid in this case, we will add display: flex and that it’s we have equal height columns.

.grid {
  display: flex;
}

There is a downside here if we want to set a width of say fifty percent and we have four columns it will by default ignore that width and fit all four columns into the same row. To fix this we will add flex-wrap: wrap to the .grid and then we can a width to .col and the 3rd and 4th columns would drop to a second row.

.grid {
  display: flex;
  flex-wrap: wrap;
}
.col {
  width: 50%;
}

Working Example

For a more complete guide to flex box check out the CSS-Tricks guide

Grid

Pros:

Cons:

The HTML

No need for a lot of wrappers/containers. We just need a parent wrapping all the columns.

<div class="grid">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

The CSS

This can be as simple of complex as you want it to be. There are options to set base column and row sizes, but you can also get a specific as you want.

.grid {
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: minmax(100px, auto);
  grid-template-columns: 50% 1fr;
}

Working Example

For a more complete guide to CSS Grid check out MDN or CSS-Tricks.