ie7 float div height

HTML & CSS
1

i have this 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 :


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 ?

2

Do you have an url to look at. In your post you have an div id=clear but that isn’t in your posted css. What is the css for the div id=clear?

3

Hi, the problem is is that on “div#products_page_header” you set a 50px height, and IE is stayin at that height.

You need to remove that height (also, I assume the #clear has clear:both on it)

div#products_page_header {
    width: 960px;
    [color=red]/*height: 50px;*/[/color]
    background-image: url(images/products_page_header.png);
    background-repeat: no-repeat;
    margin: 10px 0 0 0;
}
4

the problem is its working on all new browsers except IE7 !
Along with the height problem Ryan mentioned you also need to contain your header floats for modern browsers. The page was really not working properly as you stated it was.

Set up the #products_content styles also for any future floats that may follow the header.
Remove that clearing div and just clear the footer instead.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>

<style type="text/css">
* {margin:0;padding:0;}
body {
    background: #fff;
    font-size:100&#37;;
}
[B]#container[/B] {
    margin: 0 auto;
    width: 960px;
    border-left: [COLOR=Blue]1px [/COLOR]solid #6b5c57;
    border-right: [COLOR=Blue]1px[/COLOR] solid #6b5c57;
}


[B]#products_page_header[/B] {
    width: 960px;
    [COLOR=Red]/*height: 50px;*/[/COLOR]
    background:yellow url(images/products_page_header.png) no-repeat;
    margin: 10px 0 0 0;
    [COLOR=Blue]overflow:hidden;/*contain header floats*/[/COLOR]
}
[B]#products_content[/B]{
    [COLOR=Blue]width:960px;/*IE haslayout/float containment*/[/COLOR]
    [COLOR=Blue]overflow:hidden;/*contain floats that may follow the header*/[/COLOR]
    background:blue;
}
#products_page {
    width: 950px;
    float: right;
    margin: 50px 0 0 0;
}

.post {
    float: right;
    border: 1px solid #6b5c57;
    width: 200px;
    height: 350px;
    margin: 10px;
    background:lime;
}
[B]#siteinfo[/B] {
    [COLOR=Blue]clear:both;[/COLOR]
    height: 280px;
    position:relative;
    background:orange url(images/footer.jpg);
}

</style>
</head>
<body>

<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><!--end products_content-->

    <div id="siteinfo">
        <p>some content</p>
    </div>
</div>

</body>
</html>
5

Have you tested that cross browser? The OP needs to give IE7 only that solution because it messes up Opera and FF :smiley:

6

It does not work correctly in other browsers because the floats were not being contained properly.

The page was not working correctly for modern browsers to begin with. I posted the needed rules above.

7

Yes I did. I forgot to post the overflow:hidden; though I did have it locally.

8

And i had the overflow:hidden set on the container div lol

9

sorry for my late answer !
Thanks for your help now its working correctly !
with your method do I need to have clear div ? or just cleat at footer will work ?
thnx again

10

just clear the footer, like Rayzur said. His code will work now and for eternity :smiley: