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 a 2-column layout grid with CSS?
A 2-column layout grid divides the webpage into two equal sections, typically positioned side by side. This layout is commonly used for creating sidebars, comparison layouts, or split-screen designs using CSS positioning or modern layout techniques.
Syntax
.column {
width: 50%;
float: left; /* or use flexbox/grid */
}
Method 1: Using Fixed Positioning
This method uses fixed positioning to create two columns that stay in place when scrolling −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
color: white;
}
.left, .right {
height: 100vh;
width: 50%;
position: fixed;
padding: 20px;
box-sizing: border-box;
}
.left {
left: 0;
background-color: #2c5aa0;
}
.right {
right: 0;
background-color: #5a2c72;
}
</style>
</head>
<body>
<div class="left">
<h2>Left Column</h2>
<p>This is the left side content.</p>
</div>
<div class="right">
<h2>Right Column</h2>
<p>This is the right side content.</p>
</div>
</body>
</html>
Two fixed columns appear side by side, each taking 50% of the viewport width. The left column has a blue background and the right column has a purple background.
Method 2: Using Flexbox (Recommended)
Modern approach using flexbox for more flexible and responsive design −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
.container {
display: flex;
min-height: 100vh;
}
.column {
flex: 1;
padding: 20px;
color: white;
}
.left {
background-color: #2c5aa0;
}
.right {
background-color: #5a2c72;
}
</style>
</head>
<body>
<div class="container">
<div class="column left">
<h2>Left Column</h2>
<p>Flexbox makes this layout responsive and flexible.</p>
</div>
<div class="column right">
<h2>Right Column</h2>
<p>Both columns automatically adjust to equal heights.</p>
</div>
</div>
</body>
</html>
Two equal-width columns appear side by side with the same height. The flexbox layout automatically adjusts to the content and viewport size.
Key Points
- Fixed positioning: Creates columns that stay in place during scrolling
- Flexbox: More modern and responsive approach
- box-sizing: border-box: Ensures padding is included in the width calculation
Conclusion
CSS offers multiple ways to create 2-column layouts. While fixed positioning works for specific use cases, flexbox provides a more flexible and modern solution that automatically handles responsiveness and equal column heights.
Updated on: 2026-03-15T15:15:36+05:30
2K+ Views
Advertisements