How to place two div side-by-side of the same height using CSS?
The two or more different div of same height 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.
The used display property are listed below:
- 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 tc.
- display:table-row: This property is used for elements (div) which behaves like tr.
Example 1:
html
<!DOCTYPE html><html> <head> <style> h1 { text-align:center; color:green; } body { width:70%; } .container .box { display : flex; flex-direction : row; } .container .box .box-cell.box1 { background:green; color:white; text-align:justify; } .container .box .box-cell.box2 { background:lightgreen; text-align:justify } </style> </head> <body> <h1>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. 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 box2"> Also, 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. To quickly get your articles reviewed, please refer existing articles, their formatting style, coding style, and try to make you are close to them. </div> </div> </div> </div> </body></html> |
Output:
Example 2: This example contains multiple number of div put into side-by-side using CSS.
html
<!DOCTYPE html><html> <head> <style> .container .box { width:540px; margin:50px; display:table; } .container .box .box-row { display:table-row; } .container .box .box-cell { display:table-cell; border:1px solid black; width:25%; padding:10px; } </style> </head> <body> <div class="container"> <div class="box"> <div class="box-row"> <div class="box-cell box1"> <img src= </div> <div class="box-cell box2"> <img src= </div> <div class="box-cell box3"> <img src= </div> <div class="box-cell box4"> <img src= </div> </div> </div> </div> </body></html> |
Output:
Please Login to comment...