ie7 float div height

Question

i have this code Code:

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

and this css :

Code:

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

the problem is its working on all new browsers except IE7 ! the height of products container wont work and footer div overlap it ! what should i do ?

Answer 1

The culprit is the height: 50px; of the #products_page_header css rule ..

its contents are floated outside of it and it will not stretch to accommodate them ..