css - ie7 float 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

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

它的内容漂浮在它外面并且不会拉伸(stretch)以容纳它们..