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 > |
chevron_right
filter_none
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 > |
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.
<!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: