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
How to divide text into two column layout using HTML and CSS?
Creating a two-column text layout is a common web design requirement for displaying content side-by-side. This can be achieved using HTML div elements combined with CSS positioning properties like float or modern layout methods like flexbox.
Syntax
.column {
width: 50%;
float: left;
}
Properties Used
The following CSS properties are commonly used for two-column layouts
width Defines the width of each column (typically 50% or specific pixel values)
float Positions elements side-by-side (left/right)
margin Creates spacing around columns
padding Adds internal spacing within columns
display: flex Modern alternative to float for flexible layouts
background-color Sets column background colors
border-radius Rounds column corners
Method 1: Using Float Layout
The following example creates two columns using the float property
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 800px;
margin: 0 auto;
overflow: hidden;
}
.column {
width: 45%;
float: left;
margin: 2.5%;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
box-sizing: border-box;
}
.column h2 {
color: #333;
text-align: center;
margin-bottom: 15px;
}
.column p {
line-height: 1.6;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<h2>Column 1</h2>
<p>This is the first column containing sample text. It demonstrates how content can be organized in a two-column layout for better readability and visual appeal.</p>
</div>
<div class="column">
<h2>Column 2</h2>
<p>This is the second column with additional content. Two-column layouts are perfect for comparisons, testimonials, or splitting related information.</p>
</div>
</div>
</body>
</html>
Two side-by-side columns with light gray backgrounds and rounded corners appear. Column 1 on the left contains its heading and paragraph text, while Column 2 on the right displays its respective content.
Method 2: Using Flexbox Layout
A modern approach using CSS flexbox for more flexible column layouts
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
gap: 20px;
max-width: 800px;
margin: 0 auto;
}
.flex-column {
flex: 1;
padding: 25px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 15px;
}
.flex-column h2 {
margin-top: 0;
text-align: center;
font-size: 24px;
}
.flex-column p {
line-height: 1.7;
font-size: 16px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-column">
<h2>Left Column</h2>
<p>Flexbox provides a more powerful and flexible way to create column layouts. It automatically handles equal heights and responsive behavior.</p>
</div>
<div class="flex-column">
<h2>Right Column</h2>
<p>This method is preferred for modern web development as it's more responsive and easier to maintain than float-based layouts.</p>
</div>
</div>
</body>
</html>
Two equal-width columns with purple gradient backgrounds appear side-by-side. Both columns have equal heights and contain white text with their respective headings and content.
Conclusion
Two-column layouts can be created using either float or flexbox methods. Flexbox is the modern preferred approach as it provides better responsiveness and equal-height columns automatically. These layouts are ideal for comparisons, testimonials, or organizing related content side-by-side.
5K+ Views
