Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to arrange text in multi columns using CSS3 ?

  • Last Updated : 22 Sep, 2021

Sometimes we have seen in many websites that the content is parallel stacked to each other in order to display more content to read. This pattern is also followed in the newspapers or in the books to get read the content at a time. This kind of pattern generally helps to display the large-size content in the small area that will require minimum effort. In this article, we will learn how to arrange the content in multiple lines in a parallel stacked manner using HTML & CSS. The below image illustrates the concept.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Here, you can see we are presenting the content in four different rows to make it more comfortable to look at. To arrange text in multiple columns using only CSS is a pretty easy task to do. There are CSS properties available, by using those properties, we can create as many columns as we want, we can set the gap between the columns as well. All the required properties are described below:

  • CSS column-count: This property is used to count the number of column elements in a document that should be divided.
  • CSS column-gap:  This property is used to define the gap between columns.
  • CSS column-rule-style: This property is used to specify the style between the columns.
  • CSS column-rule-width: This property is used to specify the width of the rule between columns.
  • CSS column-rule-color: This property is used to defines the color between the columns.
  • CSS column-rule: This property is used to define the style, width, color of the rule between columns.
  • CSS column-span: This property is used to define an element that should span across how many columns.
  • CSS column-width: This property is used to specify the width of each column.

Please refer to the CSS | Multiple Columns article for creating the multiple and different style column texts.



Approach: We will use two different methods to accomplish this task: 

  • By using the column-count property that defines the number of columns an element can be divided into.
  • By using the generic CSS properties like float, padding, text-align & the width property.

We will use the above two approaches & understand them through the examples.

Example 1: In this example, we will use the column-count property and set the property into 4 so the number of columns becomes 4. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        .geeks_content {
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            padding-top: 35px;
            text-align: justify;
        }
 
        .gfg {
            text-align: center;
            font-size: 40px;
            color: green;
        }
 
        .geeks {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">
        A computer science portal for geeks
    </div>
     
    <div class="geeks_content">
        Sudo Placement: Prepare for the Recruitment
        drive of product based companies like
        Microsoft, Amazon, Adobe etc with a free
        online placement preparation course. The
        course focuses on various MCQ's & Coding
        question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful. Placement
        preparation solely depends on the company
        for which you are preparing. There are
        basically three different categories into
        which we can divide the companies visiting
        campuses for placements based on their
        recruitment process. Mass Recruiters, Tech
        Giants, Others / Start-ups Companies
        belonging to the above categories have
        their own recruitment process. In this
        course, we will try to cover every possible
        detail required to know for cracking interview
        of the companies falling in each of the above
        categories.
    </div>
</body>
 
</html>

Output:

Example 2: In this example, we will use the generic CSS properties to arrange the multiple line column in a similar fashion to achieve the same output.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Multi-line text arrangement</title>
 
    <style>
        * {
            box-sizing: border-box;
        }
 
        /* CSS property for header section */
        .header {
            background-color: green;
            padding: 15px;
            text-align: center;
        }
 
        /* CSS property for content section */
        .columnA,
        .columnB,
        .columnC {
            float: left;
            width: 31%;
            padding: 15px;
            text-align: justify;
        }
    </style>
</head>
 
<body>
    <div class="header">
        <h2 style="color: white; font-size: 200%">
            GeeksforGeeks
        </h2>
    </div>
 
    <div class="row">
        <div class="columnA">
            <h2>Column A</h2>
             
<p>
                Prepare for the Recruitment drive
                of product based companies like
                Microsoft, Amazon, Adobe etc with
                a free online placement preparation
                course. The course focuses on various
                MCQ's & Coding question likely to be
                asked in the interviews & make your
                upcoming placement season efficient
                and successful.
            </p>
 
        </div>
 
        <div class="columnB">
            <h2>Column B</h2>
             
<p>
                Prepare for the Recruitment drive
                of product based companies like
                Microsoft, Amazon, Adobe etc with
                a free online placement preparation
                course. The course focuses on various
                MCQ's & Coding question likely to be
                asked in the interviews & make your
                upcoming placement season efficient
                and successful.
            </p>
 
        </div>
 
        <div class="columnC">
            <h2>Column C</h2>
             
<p>
                Prepare for the Recruitment drive
                of product based companies like
                Microsoft, Amazon, Adobe etc with
                a free online placement preparation
                course. The course focuses on various
                MCQ's & Coding question likely to be
                asked in the interviews & make your
                upcoming placement season efficient
                and successful.
            </p>
 
        </div>
    </div>
</body>
 
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :