How to create equal height columns with CSS?

In this tutorial, we will learn how to create equal-height columns of an HTML table using CSS? By Apurva Mathur Last updated : July 25, 2023

Sometimes when we often try to make columns of equal height without using the table (purely with containers and CSS properties), we face difficulty, as their height becomes the issue. It becomes a tough task to align these columns in a straight line with the same height and width.

In this article, we'll see how we can create an equal height column with CSS?

Steps to create equal height columns with CSS

The steps to create equal height columns of an HTML table using CSS are:

Under the body tag, take one div and inside that div take another div, as these sub-div containers will be our columns. For example, if you want to make 4 columns then our structure will be like this:
```
<div class="main">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
    <div class="col4"></div>
</div>
```
Now, after this structure, we'll take any text element which will help us to write a text inside our sub-div. Here I've taken headings tags you can also take paragraph tags or other heading tags.
It's important to specify the unique class to every div, as it will be easy for us when we'll style these containers.
CSS part, Open a style tag, and using class selector we'll style the main div. If you closely look at this part in the code you'll see that display:table property is used. When we use the display:table property the element behaves like a table element. So despite using table tags I've used this CSS property. After that, you just need to specify particular width as this div contains other sub-div so it is an important factor.
After providing styling to the main div it's now time to style our sub div. All the sub-div will be styled common except their color, (if you want to change the color then you need to provide a unique class to every sub div else they all will be of the same color.). Here also, display:table-cell property is used which again will behave like <td> behaves when we define our table. Again it's important to provide equal width to all.

Let us first see the code,

Example to create equal height columns using CSS

<!DOCTYPE html>

<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <style>
         .main
         {
         display: table;
         display: flex;
         text-align: center;
         justify-content: center;
         width:60%;
         }
         .col {
         display: table-cell;
         padding: 16px;
         background-color: darkseagreen;
         width: 25%;
         }
         .col1 {
         display: table-cell;
         padding: 16px;
         background-color: lightskyblue;
         width: 25%;
         }
         .col2 {
         display: table-cell;
         padding: 16px;
         background-color: lavender;
         width: 25%;
         }
         .col3 {
         display: table-cell;
         padding: 16px;
         background-color: lightsteelblue;
         width: 25%;
         }
         h2{
         border: 2px solid black;
         padding: 10px;
         }
      </style>
   </head>
   
   <body>
      <div class="main">
         <div class="col">
            <h2>Name</h2>
            <h2>Age</h2>
            <h2>Department</h2>
         </div>
         <div class="col1">
            <h2>Jenny</h2>
            <h2>Kim</h2>
            <h2>Ron</h2>
         </div>
         <div class="col2">
            <h2>Lion</h2>
            <h2>Tiger</h2>
            <h2>Elephant</h2>
         </div>
         <div class="col3">
            <h2>Milk</h2>
            <h2>Tea</h2>
            <h2>Coffee</h2>
         </div>
      </div>
   </body>
  
</html>

The output of the above example is::

CSS Examples »

How to create an unordered list without bullets using CSS?

How to center an element vertically and horizontally with CSS?