Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create equal height columns with CSS?
Equal height columns are useful for creating uniform layouts where all columns maintain the same height regardless of their content. CSS offers several methods to achieve this, with the table display method being one of the most reliable approaches.
Syntax
/* Parent container as table */
.container {
display: table;
width: 100%;
}
/* Child columns as table cells */
.column {
display: table-cell;
}
Method 1: Using Table Display
The table display method creates equal height columns by treating the parent container as a table and child elements as table cells −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: table;
width: 100%;
border-spacing: 10px;
}
.column {
display: table-cell;
padding: 20px;
background-color: #f0f0f0;
border: 2px solid #ddd;
vertical-align: top;
}
.column:nth-child(1) { background-color: #ffebee; }
.column:nth-child(2) { background-color: #e8f5e8; }
.column:nth-child(3) { background-color: #e3f2fd; }
</style>
</head>
<body>
<div class="container">
<div class="column">
<h3>Column 1</h3>
<p>Short content</p>
</div>
<div class="column">
<h3>Column 2</h3>
<p>This column has more content to demonstrate that all columns maintain equal height regardless of content length.</p>
</div>
<div class="column">
<h3>Column 3</h3>
<p>Medium content here</p>
<p>Additional paragraph</p>
</div>
</div>
</body>
</html>
Three equal-height columns with different background colors (pink, light green, light blue) are displayed. All columns have the same height despite having different amounts of content.
Method 2: Using Flexbox
Flexbox provides a modern approach to creating equal height columns with the align-items: stretch property −
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
gap: 15px;
align-items: stretch;
}
.flex-column {
flex: 1;
padding: 20px;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 8px;
}
.flex-column:nth-child(1) { background-color: #fff3e0; }
.flex-column:nth-child(2) { background-color: #f3e5f5; }
.flex-column:nth-child(3) { background-color: #e0f2f1; }
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-column">
<h3>Flexbox Column 1</h3>
<p>Minimal content</p>
</div>
<div class="flex-column">
<h3>Flexbox Column 2</h3>
<p>This column contains significantly more content to show how flexbox automatically stretches all columns to match the tallest one.</p>
<p>Extra paragraph for demonstration.</p>
</div>
<div class="flex-column">
<h3>Flexbox Column 3</h3>
<p>Standard content</p>
</div>
</div>
</body>
</html>
Three equal-height columns with rounded corners and different background colors (light orange, light purple, light teal) are displayed using flexbox layout. All columns stretch to match the height of the tallest column.
Key Differences
| Method | Browser Support | Flexibility | Best Use Case |
|---|---|---|---|
| Table Display | Excellent (IE8+) | Limited | Simple equal columns |
| Flexbox | Good (IE11+) | High | Modern responsive layouts |
Conclusion
Both table display and flexbox methods effectively create equal height columns. Use table display for maximum browser compatibility or flexbox for modern, flexible layouts with better responsive capabilities.
Updated on: 2026-03-15T14:55:53+05:30
1K+ Views
Advertisements