CSS 父子高度

Question

我对这些代码片段有一些疑问:

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>

左边的高度是 80px，右边的高度是 150px。我希望这件事看起来像这样: http://img408.imageshack.us/img408/9978/dream.th.jpg 以上来自 IE 的屏幕截图，当我使用 IE 时，这些片段工作得很好。但是当我使用其他浏览器(歌剧、FF、Safari、Chrome)时，我得到这个: http://img408.imageshack.us/img408/869/fact.th.jpg

这不是很酷……我希望父元素 (#wrapper) 的高度能够获得两个子元素中较大的高度。

Answer 1

CSS

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