How to Divide Text Into Two Columns Layout using CSS ?
Last Updated :
08 Oct, 2024
Dividing text into two-column layouts using CSS allows for a more structured and visually appealing content presentation. It helps break long text into manageable sections, improving readability and user experience. By using CSS techniques, you can easily create balanced and organized multi-column designs.
Here we have some common approaches to dividing text into two-column layouts using CSS :
Approach 1: Dividing Text Into Two Columns Using column-count Property
Using the column-count property in CSS divides content into a specified number of columns. By setting column-count: 2, the content automatically splits into two columns, creating a balanced layout. This approach improves readability, especially for large blocks of text.
Syntax
column-count: number|auto|initial|inherit;
Example: In this example, we use the column-count CSS property to divide text in the div element into two columns. It ensures a 30px gap between columns for better readability.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
color: green;
}
.GFG {
column-count: 2;
column-gap: 30px;
/* Adjust the gap between columns */
}
</style>
</head>
<body>
<h1>
How to divide the text in the division
element into two columns using CSS?
</h1>
<div class="GFG">
<h2>Welcome to the world of Geeks!!</h2>
<p>
How many times were you frustrated while
looking out for a good collection of
programming/algorithm/interview questions?
What did you expect and what did you get?
This portal has been created to provide well
written, well thought, and well-explained
solutions for selected questions.
</p>
<p>
<strong>Our team includes:</strong>
</p>
<p>
Sandeep Jain: An IIT Roorkee alumnus
and founder of GeeksforGeeks. He loves
to solve programming problems in the most
efficient ways. Apart from GeeksforGeeks,
he has worked with DE Shaw and Co. as a
software developer and JIIT Noida as an
assistant professor.
</p>
<p>
Vaibhav Bajpai: Amazed by computer
science, he is a technology enthusiast who
enjoys being a part of development. Off
from work, you can find him in love with
movies, food, and friends.
</p>
<p>
Shikhar Goel: A Computer Science graduate
who likes to make things simpler. When he's
not working, you can find him surfing the web,
learning facts, tricks, and life hacks.
He also enjoys movies in his leisure time.
</p>
<p>
Dharmesh Singh: A software developer who
is always trying to push boundaries in search
of great breakthroughs. Off from his desk,
you can find him cheering up his buddies
and enjoying life.
</p>
<p>
Shubham Baranwal: A passionate developer
who always tries to learn new technology and
software. In his free time, either he reads
some articles or learns some other stuff.
</p>
</div>
</body>
</html>
Output:
Approach 2: Dividing Text Into Two Columns Using flexbox
Using the Flexbox approach, you can divide content into two columns by setting display: flex on the container and assigning each child element a width: 50%. This layout creates two evenly spaced columns, providing flexibility and better control over content arrangement.
Syntax
display: flex;
gap: 20px;
/* Adjust space between columns */
Example: In this example we creates a two-column layout using Flexbox. The flex-container class divides the content into two equal columns with a 20px gap, ensuring balanced and responsive content presentation.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Two Columns Layout using Flexbox</title>
<style>
.flex-container {
display: flex;
gap: 20px;
/* Adjust space between columns */
}
.column {
width: 50%;
/* Each column takes up 50% of the container width */
}
</style>
</head>
<body>
<h1>divide the text into two columns using Flexbox?</h1>
<div class="flex-container">
<div class="column">
<p>Welcome to the world of Geeks!!</p>
<p>How many times were you frustrated
while looking for a good collection
of programming/algorithm/interview
questions?
</p>
</div>
<div class="column">
<p>This portal has been created to provide
well-thought and well-explained solutions
for selected questions.
</p>
<p>Our team includes Sandeep Jain, Vaibhav Bajpai,
Shikhar Goel, Dharmesh Singh, and Shubham
Baranwal, all
passionate developers and engineers.
</p>
</div>
</div>
</body>
</html>
Output:
Using flexbox Example output
Similar Reads
How to arrange text in multi columns using CSS3 ? In many websites, content is often displayed in parallel stacks to present more information in a compact space, similar to how newspapers and books are formatted. This pattern helps display large amounts of content in a small area, making it easier to read. In this article, we will learn how to arra
4 min read
How to Define Two Column Layout using Flexbox? Here are the methods to define a two-column layout using Flexbox:Method 1. Using display: flex and flex-direction: rowThis method creates a horizontal two-column layout by setting the flex-direction to row.HTML<html> <head> <style> .container { display: flex; flex-direction: row; }
2 min read
How to Create Dynamic Grid Layout using CSS? A dynamic grid layout using CSS can help us to build responsive and flexible web designs. In this article, we are going to learn about different approaches to achieving dynamic grid layouts, with their syntax, and example code for each method. A dynamic grid layout adjusts based on the content and s
3 min read
How to Create a 2-Column Layout Grid with CSS? Creating a two-column layout is a common design pattern used in web development. This layout helps to organize content efficiently and is used across various types of websites. A 2-column layout divides the webpage into two sections, which can be useful for creating sidebars, main content areas, or
4 min read
How to Create a 4-Column Layout Grid with CSS? We can create a layout with multiple columns using CSS. It is easier to design complex layouts. In this article, we are going to discuss how to create a 4-column layout grid using CSS. We will discuss different approaches, their syntax, and code examples of each method. A 4-column layout grid is a c
3 min read
How to Set Three Columns in One Particular Row in CSS Grid? Setting up a grid layout with specific columns in CSS can sometimes be a bit challenging, especially if we are new to CSS Grid. It is a powerful tool that helps us to create complex easily. In this article, we are going to learn about different approaches to setting three columns in one particular r
4 min read
How to Create a 3-Column Layout Grid with CSS? Grid in CSS is a powerful layout system that allows you to create complex, responsive designs with ease. By defining rows and columns, you can position elements precisely within a grid container. Using grid properties like grid-template-columns, you can create flexible and adaptive layouts, such as
3 min read
How to Create a Basic Two-Column Layout using Bootstrap 5 ? To create a basic two-column layout using Bootstrap, first, we have to enclose your content within a container, then create two divs with classes like col or col-xx, where xx represents the breakpoint for responsive behavior. Place your content inside these columns, and Bootstrap will handle the lay
3 min read
How to Create a Text Divider with CSS? A text divider is a visual element used to separate content within a web page providing clarity and improving readability. In CSS we can create text dividers using various approaches such as horizontal lines, background images, or pseudo-elements. Below are the approaches to create a text divider wi
3 min read
How to place two div side-by-side of the same height using CSS? The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which
2 min read