How to Divide Text Into Two Columns Layout using CSS ?
Last Updated :
15 Jul, 2025
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
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
CSS Syntax CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:The selector is a targeted HTML element or elements to which we have to apply styling.The Declaration Block or " { } " is a block in which we write our CSS.HTML<html> <h
2 min read
CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato
7 min read
CSS Comments CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works.
2 min read
CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe
5 min read
CSS Borders Borders in CSS are used to create a visible outline around an element. They can be customized in terms ofWidth: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ he
5 min read
CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head>
4 min read
CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim
4 min read
CSS Outline CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.Syntaxselector{ outline: outline-width outline-type outline-color
4 min read