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 =
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: