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

For centering the page, I typically just put the content div in the center tag, because margin-left/right:auto really doesn't work in all versions of IE.

For making the page the whole height, you can fake it a couple of ways. My favorite is to create a background image for the body tag that is centered horizontally but tiles vertically, so that would give the main div its white background. You probably still have a footer though, so you can position it with bottom:0 and that should keep it at the bottom and give you a content div which appears to extend for the whole page.

Answer 2

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

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

Try this. This will work. Remove the html,body selector, you don't need that.

Answer 3

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 4

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%;
 }

Answer 5

This works for me in Firefox 3 & Safari 3. Don't have access to IE.

html{
  position:absolute;
  top:0;
  bottom:-1px;
  left:0;
  right:0;
  height:100%;
  text-align:center;
}
body{
  text-align:left;
  margin-left:auto;
  margin-right:auto;
  margin-top:0;
  min-height:100%;
  min-width:30em;
  max-width:50em;
  width:expression("40em");/*IE doesn't support max/min width*/
  padding:0 1em 0 1em;
}