I want my container div to get the height of max of its children's height. without knowing what height the child divs are going to have. I was trying out on JSFiddle. The container div is on red. which is not showing up. Why?
Add a comment
|
7 Answers 7
Add the following property:
.c{
...
overflow: hidden;
}
This will force the container to respect the height of all elements within it, regardless of floating elements.
http://jsfiddle.net/gtdfY/3/
UPDATE
Recently, I was working on a project that required this trick, but needed to allow overflow to show, so instead, you can use a pseudo-element to clear your floats, effectively achieving the same effect while allowing overflow on all elements.
.c:after{
clear: both;
content: "";
display: block;
}
Nightfirecat
Basically, adding this property forces the outer box to ignore the rule that floating containers have, where they are not calculated in height for containers, and apply them for the full background drawing.
fie
Wow, I was like, "What? that won't work." But I'll be darned. I totally thought it wasn't going to behave properly. Thanks
Andrew Weir
Isn't this quite hacky really? To me, it defeats the purpose of overflow. I don't understand why this is the correct and most upvoted answer.
Nightfirecat
@AndrewWeir I'll admit, until now, I hadn't been entirely sure why this method of expanding containers to correctly consider floats in their size worked. According to several sources, it seems that this causes an element to change its rendering mode, from allowing visible overflow to not doing so, and in doing so, this forces elements to disallow that overflow.
Tyler Collier
The first way, using overflow, works for me. The second way ALSO works and seems less risky in case I have overflow in the future. I only wish I could upvote twice.
You are floating the children which means they "float" in front of the container. In order to take the correct height, you must "clear" the float
The div style="clear: both" clears the floating an gives the correct height to the container. see http://css.maxdesign.com.au/floatutorial/clear.htm for more info on floats.
eg.
<div class="c">
<div class="l">
</div>
<div class="m">
World
</div>
<div style="clear: both" />
</div>
Ronnie Depp
This clear: both; thing seems to be a proper solution for container's height, because the issue is the floating children. So this approach seems better rather than the overflow: hidden; one above.
Ronnie Depp
Thanks @Yoeri for sharing this simple solution. Thumbs up!I's looking for the same solution for my new design as it's been nearly 6 years since I last designed a web layout after I solely focused on PHP development perspective rather design side.
It is not that easier?
.c {
overflow: auto;
}
Comments
Try inserting this clearing div before the last </div>
<div style="clear: both; line-height: 0;"> </div>
Comments
The best and the most bulletproof solution is to add ::before and ::after pseudoelements to the container. So if you have for example a list like:
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
</ul>
And every elements in the list has float:left property, then you should add to your css:
.clearfix::after, .clearfix::before {
content: '';
clear: both;
display: table;
}
Or you could try display:inline-block; property, then you don't need to add any clearfix.
Comments
I ran into this same issue, and I have come up with four total viable solutions:
- Make the container
display: flex;(this is my favorite solution) - Add
overflow: auto;oroverflow: hidden;to the container - Add the following CSS for the container:
.c:after {
clear: both;
content: "";
display: block;
}
- Make the following the last item inside the container:
<div style="clear: both;"></div>
Comments
I just ran into the same issue and after some research I belive using display: flow-root on the containing element is the correct approach.
From MDN on the clear property:
If an element contains only floated elements, its height collapses to nothing. If you want it to always be able to resize, so that it contains floating elements inside it, set the value of the element's display property to flow-root.
So while clear: both works (as other answers suggest), it is actually designed to correctly position other elements inside the same container respecting the height of the floating elements. display: flow-root should be used to make the containing element respect the heights of all it's children so other elements (e.g. siblings to the containing element) can be positioned properly.
Comments
default
