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?

Solution 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/

Solution 2

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>

Solution 3

It is not that easier?

.c {
    overflow: auto;
}

Solution 4

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

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

Solution 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.

View more solutions

Comments

[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.

[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.

[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.

[Alin Razvan]

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 .

[viCky]

using the updated version and it works like a charm. Still do not understand why it is working though.

[Alauddin Ahmed]

Yes it is :D. Thanks

[Admin]

i've reduced the code on jsfiddle producing the same effects 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