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.

<!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://cdncontribute.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://cdncontribute.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

Suggest a Topic

Recommended Posts: