Question

I am trying to set up a basic layout where the header and footer carry on across the width of the page no matter what resolution the user is set to.

I have managed this but now I am having a problem where the main container div will not expand properly height wise to encompass the divs within. It seems to expand to only a certain height and then goes no further, no matter what height or min-height style you change.

Here is the basic structure:

<div id="page">
    <div id="content">
    </div>

</div>
<div id="footClear"></div>

<div id="footer">
</div>

The footer code is to force the footer to stick to the bottom of the page no matter the height of the main container (id=”page”)

My CSS for these parts is:

#page {
margin:0 auto;
width:1000px;
background:red;
padding:0px;
min-height:100%;
position:relative;
margin-bottom:-47px;
}

#content {

}

#footer {
width:100%;
height:22px;
position:relative;
margin:0 auto;
background:#000000;
text-align:center;
padding-top:3px;
font-size:12px;
}

#footClear {
    height:22px;
    clear:both;
}

A link to what to my site is here if you want to have a look: http://www.therapyoracle.co.uk/new

You can see the page div is in red, and does not carry on down the page.

Answer 1

On your live site, #page has height: 100% set, which is causing the problem.

It’s coming from your ie6.css! This is how you’re trying to make it load in only IE6:

<!—[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" />
<![endif]—>

The hyphens in the HTML above are wrong. Replace that HTML with this:

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" />
<![endif]-->

And ie6.css will then only be loaded in IE6, instead of all browsers, and your problem will be fixed.