How to create equal height columns with CSS?

---

If you want to achieve an equal height of columns (side by side), follow the steps below:

Demo:

Step1.

Add HTML

Create the column container and add three columns:

<div class="column-container">
  <div class="column" style="background-color:#e9c46a">
    <h2>Column 1</h2>
    <p>Some other text..</p>
  </div>

  <div class="column" style="background-color:#2a9d8f">
    <h2>Column 2</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>

  <div class="column" style="background-color:#e9c46a">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>

Step2.

Add CSS

Set the display property values to “table” for the container, and “table-cell” for elements inside the container:

.column-container {
  display: table;
  width: 100%;
}
.column {
  display: table-cell;
  padding: 16px;
}

Add the CSS @media rule to stack the columns vertically on small screens (resize the browser window to see the effect):

@media only screen and (max-width: 600px) {
  .column { 
    display: block;
    width: 100%;
  }
}

Enjoy coding!

Read also:

CSS Border Corner Shape: Scoop, Notch, Square-Cut

How to create a responsive three-column layout?