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
Creating 2 Column Layouts while Keeping Column Background Colors full Size
Creating a 2-column layout with full-height background colors can be challenging when columns contain different amounts of content. The key is ensuring both columns stretch to match the height of the tallest column, preventing uneven background colors.
Modern CSS provides several effective methods to achieve equal-height columns with full background colors, including Flexbox, CSS Grid, and CSS Table Display. Each approach has its advantages for different use cases and browser support requirements.
Why Column Heights Matter
When creating two columns with different content lengths, the shorter column's background color typically stops at its content height, creating an uneven appearance. Equal-height layouts ensure both background colors extend to match the tallest column, creating a professional, balanced design.
Using Flexbox for Equal Height Columns
Flexbox automatically makes columns equal height by default. The flex: 1 property makes each column grow to fill available space while maintaining equal heights.
Syntax
.wrapper {
display: flex;
}
.column {
flex: 1;
background-color: color;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Two Column Layout</title>
<style>
.wrapper {
display: flex;
min-height: 400px;
}
.left-column {
flex: 1;
background-color: #3498db;
padding: 20px;
color: white;
}
.right-column {
flex: 1;
background-color: #e74c3c;
padding: 20px;
color: white;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 0;">
<div class="wrapper">
<div class="left-column">
<h2>Left Column</h2>
<p>This column has less content, but the background color fills the entire height.</p>
</div>
<div class="right-column">
<h2>Right Column</h2>
<p>This column contains much more content to demonstrate how flexbox automatically makes both columns equal 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>
</body>
</html>
Both columns display equal heights with full background colors, regardless of content length differences
Left Column (blue background) | Right Column (red background)
Less content here | More content here
| Additional paragraphs
| Making this column taller
Both backgrounds extend to same height
Using CSS Grid for Equal Height Columns
CSS Grid provides another modern approach for creating equal-height columns with precise control over layout structure.
Syntax
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Two Column Layout</title>
<style>
.grid-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 350px;
}
.grid-left {
background-color: #9b59b6;
padding: 20px;
color: white;
}
.grid-right {
background-color: #f39c12;
padding: 20px;
color: white;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 0;">
<div class="grid-wrapper">
<div class="grid-left">
<h2>Grid Left</h2>
<p>Short content in grid layout.</p>
</div>
<div class="grid-right">
<h2>Grid Right</h2>
<p>More extensive content to demonstrate CSS Grid's equal height behavior.</p>
<p>Grid automatically handles column heights without additional properties.</p>
<ul>
<li>Equal height columns</li>
<li>Full background colors</li>
<li>Modern browser support</li>
</ul>
</div>
</div>
</body>
</html>
CSS Grid creates equal-height columns automatically, with both backgrounds filling the complete vertical space
Grid Left (purple background) | Grid Right (orange background)
Short content | Extended content with list
| Multiple paragraphs
| Bullet points
Both backgrounds match heights automatically
Using CSS Table Display Method
For older browser compatibility, CSS table display provides equal-height columns without flexbox or grid support.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Table Display Layout</title>
<style>
.table-wrapper {
display: table;
width: 100%;
min-height: 300px;
}
.table-column {
display: table-cell;
width: 50%;
padding: 20px;
vertical-align: top;
}
.table-left {
background-color: #2ecc71;
color: white;
}
.table-right {
background-color: #34495e;
color: white;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 0;">
<div class="table-wrapper">
<div class="table-column table-left">
<h2>Table Left</h2>
<p>Minimal content using table display method.</p>
</div>
<div class="table-column table-right">
<h2>Table Right</h2>
<p>This method provides equal heights using CSS table display properties.</p>
<p>Works in older browsers that don't support flexbox or grid.</p>
<p>Table cells automatically stretch to match the tallest cell height.</p>
</div>
</div>
</body>
</html>
The table display method ensures equal column heights with broader browser compatibility
Table Left (green background) | Table Right (dark background)
Minimal content | Extended content explanation
| Multiple paragraphs
| Better browser support
Equal heights maintained using table-cell display
Responsive Considerations
For mobile-friendly layouts, columns should stack vertically on smaller screens. Media queries handle responsive behavior effectively with all three methods.
Example Responsive Flexbox Columns
<!DOCTYPE html>
<html>
<head>
<title>Responsive Two Column Layout</title>
<style>
.responsive-wrapper {
display: flex;
min-height: 300px;
}
.responsive-left, .responsive-right {
flex: 1;
padding: 20px;
}
.responsive-left {
background-color: #1abc9c;
color: white;
}
.responsive-right {
background-color: #e67e22;
color: white;
}
@media (max-width: 768px) {
.responsive-wrapper {
flex-direction: column;
}
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 0;">
<div class="responsive-wrapper">
<div class="responsive-left">
<h2>Responsive Left</h2>
<p>Columns are side-by-side on desktop, stacked on mobile.</p>
</div>
<div class="responsive-right">
<h2>Responsive Right</h2>
<p>The layout adapts to screen size using CSS media queries.</p>
<p>Background colors remain full-height in both orientations.</p>
</div>
</div>
</body>
</html>
The layout displays columns side-by-side on desktop and stacks them vertically on mobile devices, maintaining full background colors in both configurations.
Method Comparison
442 Views
