Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do I keep two side-by-side div elements the same height?
We need to keep the two side-by-side div the same height, so that if more content is added to any of the div, the size of the other div matches it. The following two examples are covered −
- Keep two side-by-side div elements the same height using HTML
- Keep two side-by-side div elements the same height using JavaScript
Let us see the example one by one −
Keep two side-by-side div elements the same height using HTML
Example
We will use the following code to keep two side-by-side div elements the same height -
<!DOCTYPE html>
<html>
<head>
<style>
.container{
display: table-row;
}
.box1{
display: table-cell;
background: red;
color: white;
}
.box2{
display: table-cell;
background: orange;
color: white;
}
</style>
</head>
<body>
<h1>Two Divs</h1>
<div class = "container">
<div class ="box1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
</div>
<div class = "box2">
Nunc et nisl et justo viverra fermentum.<br/>
Nunc et nisl et justo viverra fermentum.<br/>
Nunc et nisl et justo viverra fermentum.<br/>
Nunc et nisl et justo viverra fermentum.<br/>
Nunc et nisl et justo viverra fermentum.<br/>
</div>
</div>
</body>
</html>
Output
Add more content to the 2nd div and you can see the size of both the divs will increase −
Output
Keep two side-by-side div elements the same height using JavaScript
Example
We will use the following code to keep two side-by-side div elements the same height using JavaScript. The height() is used to match the height of both the divs −
<!DOCTYPE html>
<html>
<head>
<style>
.box1{
display: table-cell;
background: red;
color: white;
}
.box2{
display: table-cell;
background: orange;
color: white;
}
</style>
</head>
<body>
<div class ="box1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
</div>
<div class = "box2">
Nunc et nisl et justo viverra fermentum.<br/>
Nunc et nisl et justo viverra fermentum.<br/>
Nunc et nisl et justo viverra fermentum.<br/>
Nunc et nisl et justo viverra fermentum.<br/>
</div>
<script>
$(".box2").height($(".box1").height());
</script>
</body>
</html>
Output
Updated on: 06-Dec-2022
662 Views
Advertisements