Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Fixing the Collapsed Parent using CSS
One of the many problems that developers face while using CSS float property is that if all child elements are floated then the parent container will collapse. To avoid parent container collapsing we can use one of the following solutions.
The Problem
When all child elements inside a parent container are floated, the parent container loses its height and appears to collapse. This happens because floated elements are removed from the normal document flow, so the parent doesn't recognize them when calculating its own height.
Example of the Problem
The following example demonstrates the collapsed parent container issue −
<!DOCTYPE html>
<html>
<head>
<title>Collapsed Parent Container Problem</title>
<style>
body {
background-color: grey;
border: 4px solid black;
font-family: Arial, sans-serif;
}
#navbar, #content {
padding: 20px;
color: white;
}
#navbar {
background-color: #C303C3;
}
li {
list-style: none;
border: 2px solid black;
width: 4em;
background-color: grey;
text-align: center;
float: left;
padding: 10px;
margin: 2px;
}
#content {
background-color: #4CAF50;
}
#leftContent, #rightContent {
border: 3px solid black;
margin: 2px;
padding: 15px;
}
#leftContent {
width: 45%;
float: left;
}
#rightContent {
width: 45%;
float: right;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<div id="content">
<div id="leftContent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="rightContent">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
</body>
</html>
The navbar appears collapsed with only padding visible, and the content area also appears collapsed because all child elements are floated.
Solution 1: Float the Parent Container
Apply float: left to the parent container of the floated elements. This forces the parent to wrap around its floated children.
<!DOCTYPE html>
<html>
<head>
<style>
#navbar {
background-color: #C303C3;
padding: 20px;
float: left;
width: 100%;
}
li {
list-style: none;
border: 2px solid black;
background-color: grey;
text-align: center;
float: left;
padding: 10px;
margin: 2px;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</body>
</html>
The navbar now properly wraps around the floated list items, but this can cause issues with the parent of the navbar.
Solution 2: Using Overflow Property
Apply overflow: hidden or overflow: auto to the parent container. This creates a new block formatting context.
<!DOCTYPE html>
<html>
<head>
<style>
#navbar {
background-color: #C303C3;
padding: 20px;
overflow: hidden;
}
li {
list-style: none;
border: 2px solid black;
background-color: grey;
text-align: center;
float: left;
padding: 10px;
margin: 2px;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</body>
</html>
The navbar properly contains the floated elements and maintains its height.
Solution 3: Empty Div with Clear
Add an empty div with clear: both at the end of the parent container.
<!DOCTYPE html>
<html>
<head>
<style>
#navbar {
background-color: #C303C3;
padding: 20px;
}
li {
list-style: none;
border: 2px solid black;
background-color: grey;
text-align: center;
float: left;
padding: 10px;
margin: 2px;
}
.clearfix {
clear: both;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<div class="clearfix"></div>
</div>
</body>
</html>
The navbar properly contains the floated elements, but requires an extra empty HTML element.
Solution 4: Clearfix with Pseudo-element (Recommended)
Use the ::after pseudo-element to add a clearing element without extra HTML markup.
<!DOCTYPE html>
<html>
<head>
<style>
.clearfix::after {
content: '';
display: table;
clear: both;
}
#navbar {
background-color: #C303C3;
padding: 20px;
}
li {
list-style: none;
border: 2px solid black;
background-color: grey;
text-align: center;
float: left;
padding: 10px;
margin: 2px;
}
</style>
</head>
<body>
<div id="navbar" class="clearfix">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</body>
</html>
The navbar properly contains the floated elements using only CSS, without extra HTML markup.
Conclusion
The clearfix pseudo-element method (Solution 4) is the most recommended approach as it solves the collapsed parent problem without adding unnecessary HTML elements. Modern layouts using flexbox or grid eliminate these float-related issues entirely.
780 Views
