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

Answer 1

This should do it better.
No extra markup and/or id. No need for javascript and/or expression in css.
Should work fine on all browsers.

<style>

html 
{
 background-color:red; 
 margin:0;
 padding:0;
 border:0px;       
}

body{
 background-color:yellow;
 position:absolute;
 left:-400px; /* 50% of content width */
 width:800px; /* your content width */
 margin-left:50%;
 margin-top:0;
 margin-bottom:0;
 top:0;
 bottom:0;
 border:0;
 padding:0
}
</style>

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

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 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

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 6

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