ie7浮动div高度

Question

我有这个代码 代码：

<div id="container">
    <div id="products_content">
        <div id="products_page_header">
            <div id="products_page">
                <div class="post">
                    <div class="entrytext">
                        some text
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="clear">
    </div>
    <div id="siteinfo">
        <p>
            some content
        </p>
    </div>
</div>

和这个css：

代码：

div#container {
    margin: 0 auto;
    width: 960px;
    height: auto;
    border-left: thin solid #6b5c57;
    border-right: thin solid #6b5c57;
}


div#products_page_header {
    width: 960px;
    height: 50px;
    background-image: url(images/products_page_header.png);
    background-repeat: no-repeat;
    margin: 10px 0 0 0;
}

div#products_page {
    width: 950px;
    float: right;
    margin: 50px 0 0 0;
}

div.post {
    float: right;
    border: 1px solid #6b5c57;
    width: 200px;
    height: 350px;
    margin: 10px;
}
div#siteinfo {
    height: 280px;
    position:relative;
    background-image: url(images/footer.jpg);
}

问题是它在除IE7之外的所有新浏览器上工作！ 产品容器的高度不会工作，页脚div重叠它！ 我该怎么办？

Answer 1

罪魁祸首是height: 50px; css规则的#products_page_header ..

它的内容浮在它外面，它不会伸展以容纳它们。