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 do I keep two side-by-side div elements the same height?
We need to keep two side-by-side div elements the same height so that when more content is added to either div, both divs automatically match in height. This creates a consistent, professional layout that prevents uneven column appearances.
There are several approaches to achieve equal height columns. We will explore the most effective methods
-
CSS Table Display Using
display: table-cellfor automatic height matching -
CSS Flexbox Modern approach with
display: flex - CSS Grid Grid layout for equal height columns
- JavaScript Programmatically setting heights to match
Using CSS Table Display
The display: table-cell property automatically makes elements in the same table row have equal heights. This is one of the most reliable cross-browser methods.
Example
<!DOCTYPE html>
<html>
<head>
<title>Equal Height Divs - Table Method</title>
<style>
.container {
display: table;
width: 100%;
border-spacing: 10px;
}
.box1, .box2 {
display: table-cell;
padding: 20px;
vertical-align: top;
}
.box1 {
background: #e74c3c;
color: white;
width: 50%;
}
.box2 {
background: #f39c12;
color: white;
width: 50%;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h2>Equal Height Columns with Table Display</h2>
<div class="container">
<div class="box1">
<h3>Column 1</h3>
<p>This column has more content to demonstrate how both columns automatically adjust to the same height.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="box2">
<h3>Column 2</h3>
<p>This column has less content but matches the height of the first column.</p>
</div>
</div>
</body>
</html>
The output shows both columns have equal height despite different content amounts
Equal Height Columns with Table Display Column 1 Column 2 This column has more content to This column has less content but demonstrate how both columns matches the height of the first automatically adjust to the same column. height. Lorem ipsum dolor sit amet, consectetur adipiscing elit... (Both columns have the same height)
Using CSS Flexbox
Flexbox is the modern approach for creating equal height columns. The align-items: stretch property (default) ensures all flex items have the same height.
Example
<!DOCTYPE html>
<html>
<head>
<title>Equal Height Divs - Flexbox Method</title>
<style>
.flex-container {
display: flex;
gap: 20px;
margin: 20px 0;
}
.flex-box {
flex: 1;
padding: 20px;
color: white;
}
.flex-box1 {
background: #3498db;
}
.flex-box2 {
background: #2ecc71;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h2>Equal Height Columns with Flexbox</h2>
<div class="flex-container">
<div class="flex-box flex-box1">
<h3>Flex Column 1</h3>
<p>Flexbox automatically stretches both columns to match the tallest one.</p>
<p>This approach is more modern and flexible than table display.</p>
<p>It also supports responsive design easily.</p>
<p>Additional content here to make this column taller.</p>
</div>
<div class="flex-box flex-box2">
<h3>Flex Column 2</h3>
<p>This column automatically matches the height of column 1.</p>
</div>
</div>
</body>
</html>
The flexbox approach creates responsive equal-height columns
Equal Height Columns with Flexbox Flex Column 1 Flex Column 2 Flexbox automatically stretches This column automatically matches both columns to match the tallest the height of column 1. one. This approach is more modern and flexible than table display. (Both columns stretch to equal height)
Using CSS Grid
CSS Grid provides another modern solution for equal height columns using grid-template-rows: 1fr.
Example
<!DOCTYPE html>
<html>
<head>
<title>Equal Height Divs - Grid Method</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}
.grid-box {
padding: 20px;
color: white;
}
.grid-box1 {
background: #9b59b6;
}
.grid-box2 {
background: #e67e22;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h2>Equal Height Columns with CSS Grid</h2>
<div class="grid-container">
<div class="grid-box grid-box1">
<h3>Grid Column 1</h3>
<p>CSS Grid creates equal height columns by default when using fractional units.</p>
<p>This method gives precise control over layout.</p>
<p>Perfect for complex layouts with multiple rows and columns.</p>
</div>
<div class="grid-box grid-box2">
<h3>Grid Column 2</h3>
<p>Automatically matches the height of the tallest grid item in the same row.</p>
</div>
</div>
</body>
</html>
Using JavaScript
JavaScript provides dynamic height matching that can be useful when content changes after page load. This method uses jQuery to read and set heights programmatically.
Example
<!DOCTYPE html>
<html>
<head>
<title>Equal Height Divs - JavaScript Method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.js-container {
display: flex;
gap: 20px;
margin: 20px 0;
}
.js-box {
flex: 1;
padding: 20px;
color: white;
}
.js-box1 {
background: #34495e;
}
.js-box2 {
background: #16a085;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h2>Equal Height with JavaScript</h2>
<div class="js-container">
<div class="js-box js-box1" id="box1">
<h3>JavaScript Column 1</h3>
<p>This method programmatically sets heights to match.</p>
<p>Useful when content is added dynamically after page load.</p>
<p>The script finds the tallest element and applies that height to all others.</p>
</div>
<div class="js-box js-box2" id="box2">
<h3>JavaScript Column 2</h3>
<p>Height is set by JavaScript to match column 1.</p>
</div>
</div>
<button onclick="addContent()" style="padding: 10px; margin: 10px;">Add Content to Column 2</button>
<script>
function equalizeHeights() {
var box1Height = $("#box1").height();
var box2Height = $("#box2").height();
var maxHeight = Math.max(box1Height, box2Height);
$("#box1, #box2").height 
Updated on: 2026-03-16T21:38:54+05:30
1K+ Views
Advertisements