Wrapper DIV collapsing in Mozilla-based browsers

[alemieux34]

I have a typical Wrapper div
<div id="wrapper"></div> that I'm using as a containing block on a page. All of the content is inside this div.

It works fine in IE, but collapses in Firefox and Safari. I've added a really ugly border and background to make it stand out and it only appears at the top of the page. Here's the CSS:


#wrapper {
width: 800px;
/* height: 100%; */
margin: 0 auto;
background-color: #fff;
border: 12px solid green;
}

Has anyone seen anything like this or know how to fix it? I've seen this a few times and it's driving me bananas.

[project107]

try


html, body {
height: 100%;
margin: 0;
}
#wrapper {
background-color: #CCCCCC;
width: 800px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}

[alemieux34]

Yeah, that seems to work.

Thanks.


try


html, body {
height: 100%;
margin: 0;
}
#wrapper {
background-color: #CCCCCC;
width: 800px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}