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= "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> |
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:
.png)
