Create Equal Height Columns with CSS

Equal height columns can be created in a parent div on a web page. First, set the parent container as a table with the width 100%. Within that, create the columns and set the display property to table-cell. Let us see how to create equal height columns with HTML and CSS.

Create a parent container

<div class="container">
   <div class="column">
      <h2>Column 1</h2>
      <h2>Column 1</h2>
      <h2>Column 1</h2>
   </div>
   <div class="column">
      <h2>Column 2</h2>
      <h2>Column 2</h2>
      <h2>Column 2</h2>
   </div>
   <div class="column">
      <h2>Column 3</h2>
      <h2>Column 3</h2>
      <h2>Column 3</h2>
   </div>
</div>

Style the parent container as a table

Use the display property with the value table to create a parent div as a table −

.container {
   display: table;
   width: 100%;
}

Create column 1

Create a child div for the 1st column −

<div class="column">
   <h2>Column 1</h2>
   <h2>Column 1</h2>
   <h2>Column 1</h2>
</div>

Create column 2

Create a child div for the 2nd column −

<div class="column">
   <h2>Column 2</h2>
   <h2>Column 2</h2>
   <h2>Column 2</h2>
</div>

Create column 3

Create a child div for the 3rd column −

<div class="column">
   <h2>Column 3</h2>
   <h2>Column 3</h2>
   <h2>Column 3</h2>
</div>

Style each column

Each column is displayed with a table-cell property −

.column {
   display: table-cell;
   padding: 16px;
   background-color: greenyellow;
}

Example

To create equal height columns with CSS, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .container {
         display: table;
         width: 100%;
      }
      .column {
         display: table-cell;
         padding: 16px;
         background-color: greenyellow;
      }
      .column:nth-of-type(2n-1) {
         color: red;
         background-color: yellow;
      }
   </style>
</head>
<body>
   <h1>Equal Height Columns Example</h1>
   <div class="container">
   <div class="column">
      <h2>Column 1</h2>
      <h2>Column 1</h2>
      <h2>Column 1</h2>
   </div>
   <div class="column">
      <h2>Column 2</h2>
      <h2>Column 2</h2>
      <h2>Column 2</h2>
   </div>
   <div class="column">
      <h2>Column 3</h2>
      <h2>Column 3</h2>
      <h2>Column 3</h2>
   </div>
   </div>
</body>
</html>
Updated on: 2023-12-14T17:08:01+05:30

989 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements