HTML: Give Parent Div 100% Height Of Child Floated Elements
Many web designers and front end developers have been stumped by this dilemma before.
When you have a parent div with only floated child elements inside, how do you give the parent element the height of the floated child elements?
Before we look at the answer, let’s look at why this is a problem in the first place.
Understanding Floats
When we float elements with CSS, what we’re doing is taking those elements out of the normal flow of the page.
A floated HTML element will bump all the way to the right or left edge of it’s containing element (depending on what direction you float it) — or to the edge of another floated element.
The problem this creates with a parent HTML element that only contains floated children elements is the resulting height is no longer auto, but instead renders as height: 0.
Practical Applications
Imagine your parent element has a different background color than the preceding or subsequent sections. Or, imagine that you are trying to create white space by using margin or padding, but you’re not seeing the results you want, because the parent element has an effective height of zero.
How do we solve this?
There are a couple of methods that work. Let’s look at some HTML and CSS that may look similar to yours, and work from there.
Where We’re Starting From
Here’s some boilerplate HTML and CSS. In our example, we have a parent element with two floated child elements.
<!-- The HTML you're starting with might look similar to this -->
<div class="containing-div">
<div class="floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class="floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
</div>
/* The CSS you're starting with may look similar to this.
* This doesn't solve our problem yet, but we'll get there shortly.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
In our current example, the background color of the parent element doesn’t cover the full height like it should because the child elements are floated.
Solution #1: overflow: auto
A solution that works in all modern browsers and in Internet Explorer back to IE8 is to add overflow: auto to the parent element. This also works in IE7, with scrollbars added.
/* Our Modified CSS.
* This is one way we can solve our problem.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
overflow: auto; /*This is what we added!*/
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
Solution #2: Float Parent Container
Another solution that works in all modern browsers and back to IE7 is to float the parent container.
This may not always be practical, because floating your parent div may affect other parts of your page layout.
/* Modified CSS #2.
* Floating parent div.
*/
.containing-div {
background-color: #d2b48c;
display: block;
float: left; /*Added*/
height: auto;
width: 100%; /*Added*/
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
Method #3: Add Clearing Div Below Floated Elements
<!-- Solution 3, Add a clearing div to bottom of parent element -->
<div class="containing-div">
<div class="floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class="floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
<div class="clear"></div>
</div>
/*
* CSS to Solution #3.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
/*Added*/
.clear {
clear: both;
}
This works in old browsers as well as new. Some designers and developers may choose not to use this method, because it is not semantic. But it works.
Method #4: Add Clearing Div To The Parent Element
<!-- Solution 4, make parent element self-clearing -->
<div class="containing-div clearfix">
<div class="floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class="floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
</div>
/*
* CSS to Solution #4.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
/*Added*/
.clearfix {
clear: both;
}
.clearfix:after {
clear: both;
content: "";
display: table;
}
This solution is pretty bulletproof for older browsers and newer browsers alike.
Conclusion
No matter what solution you use to give parent elements the full height of the floated elements, test it for your particular page layout.
Awesome post, John. Well tackled.
I tend to use Method#2 where possible, although I think Method#4 would be the most robust for browser support (and semantics). Great series of posts, by the way!
CJ! Haven’t seen you around in a while. How have you been?
I actually use
overflow: autowhere I can, but adding aclearfixdiv to the bottom of the parent div, or self-clearing the parent seems to be more bulletproof than floating the parent element or the overflow technique for backwards compatibility.Thanks Mark Chouinard for catching the typo in the headline of the fourth code sample. I appreciate you pointing it out so I could correct it. \m/
Hey nice article. I’m going to use this for work, I however I am not clear how #4 works. I tried it and it worked but I’m just curious.
Can you expand on that?
Thanks,
Imran
Hi Imran:
I get the sense that solution #4 works in a similar way to #3, by creating an element (in this case a pseudo-element) with clearfix CSS attached. This forces the parent element to take on the height of the child elements.
I had a lot of problem with float and its friends. Thank you for clearing up that mess. 🙂
Hi George:
This has come in handy for me more than once. Thanks for stopping by to say hi!
– John
Have you looked into flex? Wow it solves a lot of problems. I use it now instead of floating divs around. Actually I use bootstrap, which makes web design so much easier. Boostrap 4 uses flex and it is amazing.
Hi John:
Yes, I’ve been using Flexbox for, gosh, probably the last three years. I need to add that as another method. Thanks for the reminder. I’ll put it on the to-do list for updating this article.
Thanks,
John
This will work for floated elements, I wonder, what will fix the same issue, in case of position absolute elements.
Hi Akshay:
As far as I know,
position: absoluteremoves the element from the normal flow, so any height that would be added to the parent element would be ignored. These days, I usually usedisplay: flex; justify-content: space-between;to create a parent element that contains all elements and creates equal height.If you have an absolutely positioned element, within a parent element, you’d likely have to do calculations based on any relatively positioned elements in the parent element.
– John