Open In App

How to float three div side by side using CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to learn how to float three divs side by side using CSS. Three or more different divs can be put side-by-side using CSS. Use the CSS property to set the height and width of the div and use the display property to place the div in a side-by-side format.

These are the following ways to solve this problem:

Using float property

  • In this approach, we will use float property.
  • These are the values that can be used to align divs:
    • float: left; This property is used for those elements(div) that will float on the left side.
    • float: right; This property is used for those elements(div) that will float on the right side.
  • we will use the property for the alignment.

Example: This example places three divs side by side using the float property. 

html




<!DOCTYPE html>
<html>
 
<head>
 
    <!-- CSS property to place div
            side by side -->
    <style>
        #leftbox {
            float: left;
            background: Red;
            width: 25%;
            height: 280px;
        }
 
        #middlebox {
            float: left;
            background: Green;
            width: 50%;
            height: 280px;
        }
 
        #rightbox {
            float: right;
            background: blue;
            width: 25%;
            height: 280px;
        }
 
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div id="boxes">
        <h1>GeeksforGeeks</h1>
 
        <div id="leftbox">
            <h2>Learn:</h2>
            It is a good platform to learn programming.
            It is an educational website. Prepare for
            the Recruitment drive of product based
            companies like Microsoft, Amazon, Adobe
            etc with a free online placement preparation
            course.
        </div>
 
        <div id="middlebox">
            <h2>GeeksforGeeks:</h2>
            The course focuses on various MCQ's & Coding
            question likely to be asked in the interviews
            & make your upcoming placement season efficient
            and successful.
        </div>
 
        <div id="rightbox">
            <h2>Contribute:</h2>
            Any geeks can help other geeks by writing
            articles on the GeeksforGeeks, publishing
            articles follow few steps that are Articles
            that need little modification/improvement
            from reviewers are published first.
        </div>
    </div>
</body>
 
</html>


Output:

Using display property

  • In this approach, we will use the display property.
  • These are the values tthat can be used for the alignment:
    • display:table; This property is used for elements (div) which behaves like table.
    • display:table-cell;This property is used for elements (div) which behaves like tc.
    • display:table-row;This property is used for elements (div) which behaves like tr.
  • We will use this for alignment.

Example: Another way to put three div side by side by using display property.

html




<!DOCTYPE html>
<html>
 
<head>
 
    <!-- CSS style to place three div side by side -->
    <style>
        .container .box {
            width: 540px;
            margin: 50px;
            display: table;
        }
 
        .container .box .box-row {
            display: table-row;
        }
 
        .container .box .box-cell {
            display: table-cell;
            width: 33%;
            padding: 10px;
        }
 
        .container .box .box-cell.box1 {
            background: green;
            color: white;
            text-align: justify;
        }
 
        .container .box .box-cell.box2 {
            background: lightgreen;
            text-align: justify
        }
 
        .container .box .box-cell.box3 {
            background: lime;
            text-align: justify;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <div class="container">
            <div class="box">
                <div class="box-row">
                    <div class="box-cell box1">
                        It is a good platform to learn programming.
                        It is an educational website. Prepare for
                        the Recruitment drive of product based
                        companies like Microsoft, Amazon, Adobe etc
                        with a free online placement preparation
                        course.
                    </div>
 
                    <div class="box-cell box2">
                        The course focuses on various MCQ's &
                        Coding question likely to be asked in
                        the interviews & make your upcoming
                        placement season efficient and successful.
                    </div>
 
                    <div class="box-cell box3">
                        Any geeks can help other geeks by writing
                        articles on the GeeksforGeeks, publishing
                        articles follow few steps that are Articles
                        that need little modification/improvement
                        from reviewers are published first.
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>
 
</html>


Output:



Last Updated : 29 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads