How to place two div side-by-side of the same height using CSS? Last Updated : 03 Aug, 2023 Comments Improve Suggest changes Like Article Like Report 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= "https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-90-2.png" alt="" /> </div> <div class="box-cell box2"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-91-2.png" alt="" /> </div> <div class="box-cell box3"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-94-3.png" alt="" /> </div> <div class="box-cell box4"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-95-2.png" alt="" /> </div> </div> </div> </div> </body> </html> Output: Comment More infoAdvertise with us S Sabya_Samadder Follow Improve Article Tags : Technical Scripter Web Technologies CSS Technical Scripter 2018 CSS-Misc +1 More Similar Reads How to set multiple background images using CSS? The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: backgr 2 min read CSS Preprocessor SASS Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that enhances standard CSS by introducing features like variables, nesting, imports, mixins, and inheritance, all while maintaining compatibility with all CSS versions.Key Features of Sass:Variables: Store reusable values such as colors 4 min read CSS Website Layout CSS website layout divides a webpage into multiple sections like header, navigation bar, content area, and footer, making it easier to organize content and build the site.1. Header SectionThe header is the top section of a webpage, typically containing the website's name or logo.html<html> 4 min read How to make div not larger than its contents using CSS? There are three ways to achieve this problem: By default case Using inline-block property Using fit-content property in width and height Default Case: In HTML div is by default fit to content inside it. The example goes like this: Example 1: html <!DOCTYPE html> <html lang = "en" 3 min read Building Tooltip using CSS A Tooltip provides users with additional information about an element when the mouse pointer hovers over it. For example, when a user hovers over a button labeled "GeeksForGeeks," additional information such as "A Computer Science Portal" can appear as a tooltip.Tooltip PositionsTooltips can be posi 7 min read How to Set Background Color Opacity without Affecting Text in CSS? Here are two approaches to set a background color with opacity in CSS without affecting the text.1. Using RGBA color valuesTo set the opacity only to the background color and not the text inside it we can use RGBA color values instead of the opacity property. Because using the opacity property can c 2 min read Transition shorthand with multiple properties in CSS? The transition shorthand in CSS allows specifying multiple properties for smooth transitions between different states or values. The transition property in CSS is used to create transitions in an element, enabling changes to occur smoothly over a specified duration. This article demonstrates how to 2 min read How to prevent line breaks in the list of items using CSS? The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items. Syntax: element 1 min read How to remove the space between inline-block elements? To remove space between inline-block elements in CSS, ensure no whitespace or line breaks exist in HTML between elements. Alternatively, set the font-size of the parent to 0 and reset for elements, or apply a negative margin to elements. This ensures elements align seamlessly without unwanted spacin 3 min read 6 Best CSS frameworks You should Know to design Attractive Websites If you want to speed up your website and development process, or want to add some classy designs to your website, then you're at the right place. Awesome new popups, speed, ultimate colors and themes are waiting for you. Front end development is the complete pack of creation and colors and have amaz 3 min read Like