Open In App
Related Articles

How to float three div side by side using CSS?

Improve Article
Improve
Save Article
Save
Like Article
Like

Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format.

  • float:left; This property is used for those elements(div) that will float on left side.
  • float:right; This property is used for those elements(div) that will float on right side.

Example 1: This example place three div side by side using 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:

Example 2: This example place three div side by side using float property. 

html




<!DOCTYPE html>
<html>
    <head>
     
        <!-- CSS style to put div side by side -->
        <style type="text/css">
        .container {
            width:600px;
            height:190px;
            background-color:green;
            padding-top:20px;
            padding-left:15px;
            padding-right:15px;
        }
        #st-box {
            float:left;
            width:180px;
            height:160px;
            background-color:white;
            border:solid black;
        }
        #nd-box {
            float:left;
            width:180px;
            height:160px;
            background-color:white;
            border:solid black;
            margin-left:20px;
        }
        #rd-box {
            float:right;
            width:180px;
            height:160px;
            background-color:white;
            border:solid black;
        }
        h1 {
            color:Green;
        }
        </style>
    </head>
     
    <body>
        <center>
        <h1>GeeksforGeeks</h1>
         
        <div class="container">
            <div id="st-box">
                <img src=
                "style="width:180px; height:160px;">
            </div>
             
            <div id="nd-box">
                <p>
                    We can create as many div as many we want side by
                    side with the same height and also with the
                    different heights.
                </p>
            </div>
             
            <div id="rd-box">
                <img src=
                "style="width:180px; height:160px;">
            </div>
        </div>
        </center>
    </body>
</html>                   

Output:

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

  • 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.

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 : 16 Aug, 2023
Like Article
Save Article
Similar Reads
Related Tutorials