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 :

Table of Content

Using column-count
Using flexbox

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:

column-display — Using flexbox Example output

React Tutorial

manaschhabra2

Improve

Article Tags :

How to Divide Text Into Two Columns Layout using CSS ?

Approach 1: Dividing Text Into Two Columns Using column-count Property

Syntax

Approach 2: Dividing Text Into Two Columns Using flexbox

Syntax

Similar Reads

Thank You!

What kind of Experience do you want to share?