height 100% - different display in IE / Firefox/ Opera

[newbiecss]

I have a problems with how the different browsers display my page. IE6 is displaying it how i want with the background colour of white showing all the while i have content and then adding the padding/margin sizes on top.

However in Firefox and Opera the white background only seems to show for a very small section of the page.

All of my content is held in a container div as follows:


#container {
width:955px;
align: center;
text-align: left;
margin-right: auto;
margin-left: auto;
margin-top:20px;

}

Then I have another div nesting in this which displays my right hand content:


#right_content {
border-left: 1px solid #00000000;
margin-left: 2px ;
margin-right:2px ;
background: #ffffff;
height: 100%;

}

And finally i have another div nested inside that which contains my gallery


.gallery{

float: left;
margin-bottom: 2em;


}
dl.gallery
{
border: 1px solid #fff;
background-color: #B2DBFB;
width: 252px;
max-height: 25em;
text-align: center;
padding: 10px;
align: left;
margin-right: 1em;
margin-left: 1em;
margin-bottom: 4em;
}

Can anyone tell me where i'm going wrong? The only way I seem to be able to get Firefox and Opera to display my white background to the bottom of the document is by specifying a pixel height i.e.:

height: 1200px;

which obviously i do not want to do, as each page on my website will have a different height size dependent on the amount of contained contained in it.

With many thanks for any light on this matter - i've been tearing my hair out on this one for a couple fo days!!

[markbrown4]

Hi,

IE6 is displaying it incorrectly

height: 100%; means you want the element to be 100% and that's final.
IE6 treats it as min-height and will expand to fit more content.
You need to feed all browsers min-height: 100%; then deliver IE6< height: 100%;

If you haven't seen the FAQ there's a wealth of good info in there:
height: 100%;

--
If you need specific help with your page, you'll need to supply the HTML as well - The css can't do much without it. Though I believe you need to set body and html to height: 100% also to make it work. It's all in the FAQ, and the author knows his 100% high model inside-out
--

Hope it helps

[newbiecss]

Hi I really appreciate your input on this one. Unfortunately after altering the CSS so that the body height is 100% and the height for the right_content is min-height: 100% is still does not display the white background all the way down.

I am attaching the CSS file (V4) and the html file (holdingpageUPLOAD2) - maybe i'm doing somethign wrong in the html?

Thanks again.

[newbiecss]

Apologies they didn't get uploaded first time.

I have highlighted in red the majority of the divs that are being used in the V4 css for this holdingpageUPLOAD2. Hope that helps.

Thanks.

[Centauri]

When you specify a percentage height, it is a percentage of the parent height if that parent has a height specified. As #container does not have a height assigned, the 100&#37; height of #right_content is meaningless.

What do you want it to be 100% of ?