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.