How to Keep Divs the Same Height?

Equal height columns? Divs that stay the same height?

After reading this post you will have beautiful, responsive divs/columns that always stay the same height as the content grows. How will we achieve this might you ask? Through the awesomeness of Flexbox! Flexbox has 94% global support (and you can provide fallbacks easily, but that is for another post) and it has made it easier to work with divs, columns, create image galleries and complex layouts that are also responsive.

So let’s get to it, how do we use Flexbox to create responsive columns of equal height regardless of how much text/content is in each one?

HTML Structure

We will start with some HTML to define our columns. For the purpose of this example let’s create 3 divs as our columns with an image and some text inside. To help us make these look even we will also need to wrap the whole thing in a container div, so let’s add that as well. You will see why we need a container div shortly.

Example structure, amend this as needed.

See the Pen Vertically Aligned Divs by Liliana Kastilio (@lili2311) on CodePen.

Some CSS styling

So now we have our markup, let’s give it some basic styling: some background colour so we can see where our columns start and end and let’s make it a 3 column layout by fixing the width as a quick hack for now.

Example CSS, amend this as needed.

See the Pen Vertically Aligned Divs by Liliana Kastilio (@lili2311) on CodePen.

Ugly uneven columns

So at this stage we have exactly what you don’t want, 3 ugly uneven columns. So when you only have a tiny bit of content in one it stays shorter than the others. 🚫 I am sure you have already tried fixing the height of the element and I probably don’t have to say that that was a terrible idea and it looks bad anyway.

Flexbox to the rescue

What we really want is to allow the columns to breathe and grow as they need to given the amount of content in them but all stay the same height which is the height of the longest columns. This is where we can use the magic 💫 of Flexbox.

What do you need to know to use Flexbox?

Flexbox container

When working with flexbox there is always a parent container that wraps around the elements that you want to align with Flexbox.

Display Flex

This parent element must have it’s display property set to display: flex. By just setting that property we have almost fixed our problem completely!

Flex Direction

You can also set the direction in which you want the items to align, which can be row or column. In this scenario all the columns we have need to sit in one row. So we want all the immediate children of the Flex container to be in one row and therefore we need to set flex-direction: row but if we also want it to stay fully responsive and the columns to fold over to the next row when there is not enough space we can tell the container to allow wrapping with flex-wrap: wrap:

Example CSS with Flexbox

See the Pen Vertically Aligned Divs by Liliana Kastilio (@lili2311) on CodePen.

Flexbox children

For each child of a flex container (these will automatically be the direct children) we also can specify how much each child can grow and shrink given the amount of available space. So in our case we can set flex: 1; on the .col and to fully see it’s effect let’s remove everything else we added for this example to be a 3 col layout.

Example CSS with extra properties for responsiveness.

See the Pen Vertically Aligned Divs by Liliana Kastilio (@lili2311) on CodePen.

And here is the final result, 3 same height and same width columns that are responsive and without using any grids!

See the Pen Vertically Aligned Divs by Liliana Kastilio (@lili2311) on CodePen.

🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on Twitter and checking out my code school for some hands on guided coding practice.