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