Categories
CSS Web development

How to create equal height columns with CSS?

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:

Column 1

Some other text..

Column 2

Some other text..

Some other text..

Some other text..

Some other text..

Column 3

Some other text..

Some other text..


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!