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 td.
  • display:table-row: This property is used for elements (div) which behaves like tr.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                text-align:center;
                color:green;
            }
            body {
                width:70%;
            }
            .container .box {
                width:540px;
                margin:50px;
                display:table;
            }
            .container .box .box-row {
                display:table-row;
            }
            .container .box .box-cell {
                display:table-cell;
                width:50%;
                padding:10px;
            }
            .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>                    

chevron_right


Output:
div tag

Example 2: This example contains multiple number of div put into side-by-side using CSS.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:
div tag



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.