How to float three div side by side using CSS?

Last Updated : 06 Sep, 2024

Floating three div elements side by side using CSS means aligning them horizontally in a row. This is done by applying float: left; to each div, which moves them to the left of the parent container, allowing them to sit next to each other.

These are the following ways to solve this problem:

Table of Content

Using float property
Using display property

Using float property

Using the float property, you can align elements horizontally by applying float: left; or float: right; to each element. This causes the elements to float next to each other in a row, allowing them to stack side by side within the container.

Example: In this example we creates a webpage with three side-by-side colored boxes (red, green, blue) using CSS float properties. Each box contains text, and the title is centered.

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

Using the display property, you can align elements side by side by setting display: flex; or display: inline-block; on the parent container. flex creates a flexible row layout, while inline-block places elements inline, allowing them to sit horizontally next to each other.

Example: In this example we displays three side-by-side colored boxes (green, light green, and lime) using CSS table layout. Each box contains text about GeeksforGeeks, and the title is centered.

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:

How to change color of PNG image using CSS?

Sabya_Samadder

Improve

Article Tags :

How to float three div side by side using CSS?

Using float property

Using display property

Similar Reads

Thank You!

What kind of Experience do you want to share?