Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to 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: 14-Dec-2023
570 Views
Advertisements