Open In App

How to place two div side-by-side of the same height using CSS?

Last Updated : 03 Aug, 2023
Improve
Improve
Like Article
Like
Save
Share
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: 

div tag

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=
                         alt="" />
                </div>
                <div class="box-cell box2">
                    <img src=
                         alt="" />
                </div>
                <div class="box-cell box3">
                    <img src=
                         alt="" />
                </div>
                <div class="box-cell box4">
                    <img src=
                         alt="" />
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output: 

div tag



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads