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






                        filter_none








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= 


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



















                        chevron_right







                        filter_none








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







                        filter_none








Output:







    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Sabya_Samadder
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 : 
Web Technologies

           	
        

         

         
 
                3

                

        



        
        
        
        
        

    

            

            0
            

            

                             No votes yet.
                    

            
            
            
            
            
        

        
        

        

        

        

        

        

        


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