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 {
align: center;
text-align: left;
margin-right: auto;
margin-left: auto;


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


float: left;
margin-bottom: 2em;

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