How to float three div side by side using CSS?

Difficulty Level : Basic
Last Updated : 12 Feb, 2019

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.

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

<!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=
"https://media.geeksforgeeks.org/wp-content/uploads/download-49.png
                "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=
"https://media.geeksforgeeks.org/wp-content/uploads/images-31.png 
                "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 td.
display:table-row;This property is used for elements (div) which behaves like tr.

<!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:

My Personal Notes

Related Articles

How to float three div side by side using CSS?