How to float three div side by side using CSS?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.