100% height doesn't stretch ?

[Reggie]

Hi,

I have this layout wich has a height of 100%. Works fine in IE, but Firefox is giving me a  hard time.
He stretches the page 100%, but whenever the content grows larger then 100% the div doesn't stretch anymore.

This is the css for the wrapper, the menu (left), and the content (right). (Website: http://www.paulhageman.be/biografie)

Code: Select all

html, body { height: 100%; }
body { text-align: center; margin: 0px 0px 0px 0px; }
#wrapper { margin:0px auto; height: 100%; width: 800px; }
#menu { float: left; margin-top: 10px; margin-left: 10px; }
#content { margin: 0px auto; float: right; width: 520px; margin-bottom: 40px; margin-right: 10px; margin-top: 13px;}

Any fix for this ?

[Dr.CSS]

I think it may be due to one to many at the bottom it comes too soon to wrap the content completely.

Take out the one above the footer and put it above the .

[engola]

First: Modern browsers such as Firefox need min-height:100% - Only IE takes height as min-height!
Second: IE doesn't understad it, therefore place a hack after the wrapper-definition: * html div#wrapper{height:100%}
Third: floating elements won't strech the wrapper. Your #content doesn't need to float. Erase it.