CSS - Centering a page - then making the page 100% height

Question

I'm trying to center a page and then make it 100% in height. I have a div called "content" as the parent element of all elements in the HTML page. What do I need to do next? I'd like to stay away from any CSS-hacks. This is currently working in IE7, but not in Firefox 3.

EDIT: I added height: 100%; to #content that's what made it work in IE. Firefox still not solved.

My stylesheet so far is:

html, body
{
    width: 100%;
    height: 100%;
}

body
{
    background-color: #000;
    text-align: center; 
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto; 
} 

#content
{
    position: relative; 
    text-align: left;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    width: 840px;
    height: 100%;
    padding: 0px 5px 5px 5px;
}

Answer 1

To center content, put it inside of an element that has a fixed width (important!) and has margin: auto;

There is no cross-browser was to make your div have 100% height unless you use javascript. If you are desperate for this functionality and are willing to use javascript, you can dynamically set the height of your content by setting it to the window height. I've never done this so I won't tell you how exactly, but it should be easy to find by googling.

Answer 2

Ahah! Think I got it for now. This works in Firefox 3 and IE7. I will test on some other browsers later. I do still need to figure out adding some padding around my content.

This requires this heirarchy on my page

html  
|__body  
     |__div id=container  
         |__div id=content  

    html
    {
        height: 100%;
    }

    body
    {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container
    {
        position: absolute;
        text-align: center; 
        background-color: #000;
        width: 100%;
        height: 100%;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;    
    } 

    #content
    {
        text-align: left;
        background-color: #fff;
        margin: 0px auto;
        width: 830px; /* padding thing I'm working on */
        height: 100%;
    }