CSS Parent-Child height

Question

I have some problem with these code snippets:

CSS:

#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

HTML:

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
</div>

Left's height is 80px, and right's height is 150px. I would like this thing to appear like this: http://img408.imageshack.us/img408/9978/dream.th.jpg The above screenshot from IE, when I use IE these snippets work perfectly. But when I use other browser (opera, FF, Safari, Chrome), I get this: http://img408.imageshack.us/img408/869/fact.th.jpg

This is not cool… I want the parent (#wrapper) element's height to get the bigger height of the two children.

Answer 1

This is a bug in IE.

Containing floats explains why you see this behaviour, while Methods for Containing Floats gives better solutions than adding extra markup.

Answer 2

CSS

#wrapper:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;}

Answer 3

Thanks for the quick answer David. I have not read all the content you wrote (two links), but I came across a solution on the second link. I've put an extra div, with "clear:both;" to the container, and it's working! Thanks. Matt Ball: thanks, but I would like this thing to grow dynamically

Answer 4

When two div(s) float in a container that has not a fixed height (or its height is < than the max height of the contained div(s)), your container collapse in a line of pixel and your floating div(s) overflow the container.

To force the container to contain the two div, you need to clear both the float(s) before closing the container! In other words ....

CSS

<style>
#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

.clearer{ clear: both;}
</style>

HTML

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
    <div class="clearer"></div>
</div>

Answer 5

Simply set the parent's overflow style to anything other than visible and it will wrap around the child content.

Answer 6

The best solution I’ve found is similar to Rodrigo’s above, but without the need for the space character in the content (and therefore no need to specify the font size either). If you make it a class you can apply it to any container block, not just your wrapper. (I also feel it’s best not to style an ID, but that’s a different question.)

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
*:first-child+html .clearfix { /* Optional fix for IE7 */
    zoom: 1; 
}