CSS container div not getting height

Question

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?

Answer 1

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/

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

4. Make the following the last item inside the container:

<div style="clear: both;"></div>

Answer 3

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

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

Answer 4

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>

Answer 5

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.

Answer 6

It is not that easier?

.c {
    overflow: auto;
}

Answer 7

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.