div height problem

css dic height 100%

[roofyroo]

Hi All,

I have been coding for some time and am usually good at searching the web for fixes but this latest issue is driving me nuts so perhaps someone can help or point me in the right direction?

I have a fairly simple site which pulls in content from a database into either 1 area or 2 areas depending on page.

Single area page example
[dev.elleaunaturel.com...]

Relevant CSS for the page above which controls layout only is as follows.

html, body {
margin: 0px;
padding: 0px;
height: 100%;
}

#wrapper {
text-align: left;
margin-left: auto;
margin-right: auto;
width: 960px;
height: 100%;
}

#header {
width: 960px;
height: 70px;
}


#centercontent {
width: 960px;
height: 100%;
}

#box_full {
padding: 20px 20px 20px 35px;
float: left;
height: auto;
width: 905px;
}

Content for this page sits in DIV box_full which sits inside DIV centercontent. On the page above you fill see the height does not extend over the entire content. Also if the height is set to 100% in the box_full the DIV actually moves further up the page along with the footer.

I have tried combinations of height:100% and min-height:100% in the body, html and DIVs but to no avail. I'm sure this is a simple problem which can be easily fixed so any help would be hugely appreciated!

Thanks

[roofyroo]

Is it because my DIVs are having their height set before the content is being read into the page?

Just a thought...

[Major_Payne]

Try setting an explicit height for the "centercontent". Auto renders the height just high enough to enclose its contents I believe.

[roofyroo]

Thanks.

I can't use an explicit height as all content for various pages differ. If using auto then it should enclose it's content, but it's not.

[enigma1]

If I understand your question correctly the problem is with the body tag where you specify 100%. Take it out and see.

If you specify a fixed height for the centercontent you will get problems with some browsers (IE7 for instance)

[roofyroo]

I'll try this now and post back. The reason the body tag has 100% is so the wrapper/centercontent have a way of knowing what 100% is.

[roofyroo]

Yep if I take it out the centercontent DIV actually moves all the way to the top of page because it doesn't know what to do with 100%.

Frustrating!