CSS Parent-Child height

Question

hi,

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

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 3

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>