How to float three div side by side using CSS? - GeeksforGeeks

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:
CSS-Misc
Picked
Web-Programs
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Angular Libraries For Web Developers
Convert a string to an integer in JavaScript
How to calculate the number of days between two dates in javascript?
Difference between var, let and const keywords in JavaScript
How to create footer to stay at the bottom of a Web page?