How to create: equal height columns

Learn how to use CSS to create equal height columns.

How to create equal height columns

When your columns should be displayed side by side, you usually want them to have the same height (matching the tallest height).

Try it yourself

Step 1 - Add HTML:

<div class="col-container">
  <div class="col">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>
  <div class="col">
    <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>
  <div class="col">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>

Step 2 - Add CSS:

.col-container {
  display: table; /* Make the container element behave like a table */
  width: 100%; /* Set to full width to expand the entire page */
}
.col {
  display: table-cell; /* Make the elements inside the container behave like table cells */
}

Try it yourself

Responsive equal height

The columns we created in the previous example are responsive (if you adjust the size of the browser window in the example you are trying, you will see them automatically adjust to the required width and height). However, for small screens (such as smartphones), you may want them to stack vertically instead of being displayed horizontally side by side:

To achieve this, add a media query and specify a breakpoint pixel value for it:

Example

/* If the browser window is less than 600px, make the columns stack */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Try it yourself

Implement equal height and width with Flexbox

You can also use Flexbox to create equal-height boxes:

Example

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

Try it yourself

Note:Internet Explorer 10 and earlier versions do not support Flexbox.

Pages associées

Tutoriel :Flexbox CSS