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 align text in CSS where both columns are straight?
CSS provides several methods to align text in two straight columns. This technique is useful for creating layouts where content needs to be evenly distributed across two vertical sections while maintaining proper alignment.
Syntax
/* Using Flexbox */
.container {
display: flex;
justify-content: space-between;
}
/* Using Float */
.column {
float: left;
width: 50%;
}
/* Using Text Align */
.column {
text-align: left | center | right;
}
Method 1: Using Flexbox
Flexbox provides the most modern and flexible approach to create two straight columns. The display: flex property creates a flexible container, while justify-content: space-between distributes columns evenly.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-between;
padding: 20px;
border: 1px solid #ccc;
}
.left-col {
width: 48%;
text-align: left;
background-color: #f0f8ff;
padding: 10px;
}
.right-col {
width: 48%;
text-align: right;
background-color: #fff0f5;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-col">
<h3>Left Column</h3>
<p>This text is aligned to the left in the first column.</p>
</div>
<div class="right-col">
<h3>Right Column</h3>
<p>This text is aligned to the right in the second column.</p>
</div>
</div>
</body>
</html>
Two columns appear side by side: a light blue left column with left-aligned text and a light pink right column with right-aligned text, both contained within a bordered container.
Method 2: Using Float Property
The float property allows elements to be positioned side by side by floating them left and right. This is a traditional approach for creating column layouts.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden; /* Clear floats */
}
.left-col {
width: 48%;
float: left;
text-align: left;
background-color: #e6ffe6;
padding: 10px;
margin-right: 2%;
}
.right-col {
width: 48%;
float: right;
text-align: right;
background-color: #ffe6e6;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-col">
<h3>Float Left</h3>
<p>This column floats to the left with left-aligned text.</p>
</div>
<div class="right-col">
<h3>Float Right</h3>
<p>This column floats to the right with right-aligned text.</p>
</div>
</div>
</body>
</html>
Two floating columns appear: a light green left column with left-aligned text and a light red right column with right-aligned text, both properly contained within a bordered container.
Method 3: Using CSS Grid
CSS Grid offers precise control over column layouts and is ideal for creating equal-width columns with proper alignment.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 20px;
border: 1px solid #ccc;
}
.grid-left {
text-align: left;
background-color: #f0f0f0;
padding: 15px;
}
.grid-right {
text-align: right;
background-color: #e0e0e0;
padding: 15px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-left">
<h3>Grid Column 1</h3>
<p>This text is left-aligned in the first grid column.</p>
</div>
<div class="grid-right">
<h3>Grid Column 2</h3>
<p>This text is right-aligned in the second grid column.</p>
</div>
</div>
</body>
</html>
Two equal-width grid columns with a gap between them: a light gray left column with left-aligned text and a darker gray right column with right-aligned text.
Conclusion
Flexbox provides the most modern and flexible solution for aligning text in two straight columns, while CSS Grid offers precise control for complex layouts. The float method remains useful for legacy browser support but is less preferred in modern development.
5K+ Views
