121

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?

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
Neel Basu
  • 12,638
  • 12
  • 82
  • 146

7 Answers7

288

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;
}

http://jsfiddle.net/gtdfY/368/

Community
  • 1
  • 1
Nightfirecat
  • 11,432
  • 6
  • 35
  • 51
  • 8
    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. – Nightfirecat Oct 19 '11 at 15:29
  • 4
    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 – fie Mar 02 '13 at 16:08
  • 1
    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. – Andrew Weir May 01 '13 at 11:27
  • 3
    @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](http://www.quirksmode.org/css/clearing.html) [to](http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow) [several](http://annevankesteren.nl/2005/03/clearing-floats) [sources](http://www.mezzoblue.com/archives/2005/03/03/clearance/), 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. – Nightfirecat May 01 '13 at 21:11
  • 2
    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. – Tyler Collier Oct 29 '13 at 23:00
  • it worked for me , i had this issue for a long time , i've tried with overflow .. but not what i wanted , your answer does the trick , thanks . – Alin Razvan Feb 10 '15 at 16:40
  • using the updated version and it works like a charm. Still do not understand why it is working though. – viCky Jan 11 '18 at 05:45
  • i've reduced the code on jsfiddle producing the same effects http://jsfiddle.net/kpxq2eyn/9/ think it's easier to understand. And there is another weird solution which is adding `float:left; width:100%; padding:0;' to the parent container –  Oct 04 '19 at 13:13
28

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>
Yoeri
  • 1,876
  • 15
  • 24
  • 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 Oct 07 '13 at 18:55
  • 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. – Ronnie Depp Oct 07 '13 at 19:00
20

It is not that easier?

.c {
    overflow: auto;
}
Antonio Romero Oca
  • 1,196
  • 10
  • 31
4

Try inserting this clearing div before the last </div>

<div style="clear: both; line-height: 0;">&nbsp;</div>

lee
  • 1,036
  • 2
  • 14
  • 24
3

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.

Agata
  • 41
  • 3
2

I ran into this same issue, and I have come up with four total viable solutions:

  1. Make the container display: flex; (this is my favorite solution)
  2. Add overflow: auto; or overflow: hidden; to the container
  3. Add the following CSS for the container:
.c:after {
    clear: both;
    content: "";
    display: block;
}
  1. Make the following the last item inside the container:
<div style="clear: both;"></div>
star8163264
  • 148
  • 2
  • 8
0

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.

ifloop
  • 8,079
  • 2
  • 26
  • 35