height: 100% Browser issues - okay in IE not in FF or Opera

[mmgrad]

I have a problem 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:

Code: Select all

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

Code: Select all

#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

Code: Select all

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

[Stuart]

Try adding the following to container div:

Code: Select all

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

That should work...

[Marc]

Have you got a link to your problems?? Unless of course the above works

[Lucleonhart]

Did you set the html and body tag to 100% height? That is always a little mistake for wrong height definitions.

Code: Select all

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

)