CODEWITHSUNDEEP
cssheightparent
user196776
user196776

Reputation: 13

CSS Parent-Child height

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.

Upvotes: 0

Views: 4034

Answers (6)

Caspar
Caspar

Reputation: 1186

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; 
}

Upvotes: 0

Adam
Adam

Reputation: 199

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

Upvotes: 0

Rodrigo Lacerda
Rodrigo Lacerda

Reputation: 21

CSS

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

Upvotes: 2

BitDrink
BitDrink

Reputation: 1193

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>

Upvotes: 0

user196776
user196776

Reputation: 13

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

Upvotes: 0

Quentin
Quentin

Reputation: 943143

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.

Upvotes: 1

Related Questions