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
Why doesn't the height of a container element increase if it contains floated elements?
To fix this use, we need to use the overflow property and set it on the outer parent div. We have an inner child div and an outer parent div −
<div class="outer"> <div class ="inner"> </div> </div>
The outer parent div is set with the following CSS style. The min-height is set 100px and the overflow property is set to auto. This doesn’t let the height of the container element to increase even if it contains floated elements −
.outer {
margin: 0 auto;
width: 960px;
min-height: 100px;
background-color:yellow;
overflow:auto;
}
The float elements we discussed above are set in the inner child div using the float: right property. Below is the styling of the inner div −
.inner {
width:500px;
height:200px;
background-color:blue;
float:right;
}
Example
Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
.outer {
margin: 0 auto;
width: 960px;
min-height: 100px;
background-color:yellow;
overflow:auto;
}
.inner {
width:500px;
height:200px;
background-color:blue;
float:right;
}
</style>
</head>
<body>
<div class="outer">
<div class ="inner">
</div>
</div>
</body>
</html>
Output
If you will remove the overflow property, then the inner div will overflow itself outside div as shown below −
Therefore, we fixed the above issue using the overflow property with the value auto.
Updated on: 06-Dec-2022
89 Views
Advertisements