CSS container div not getting height
I want my container div to get the height of max of its children's height. without knowing what height the child div
s are going to have. I was trying out on JSFiddle. The container div
is on red. which is not showing up. Why?
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/
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>
It is not that easier?
.c {
overflow: auto;
}
Try inserting this clearing div before the last </div>
<div style="clear: both; line-height: 0;"> </div>
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.