height 100% - different display in IE / Firefox/ Opera
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:
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:
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
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?
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% height of #right_content is meaningless.