CSS - centering the page - then creating a page at 100% height

Question

I am trying to center the page and then make it 100% tall. I have a div called "content" as the parent of all the elements in the HTML page. What do I need to do next? I would like to stay away from any CSS hacks. It currently works in IE7, but not in Firefox 3.

EDIT: I added height: 100%; on #content, which made it work in IE. Firefox has not decided yet.

My stylesheet so far:

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 the content, place it inside a fixed-width element (important!) And has margin: auto;

There is no cross browser for your div to be 100% high if you are not using javascript. If you are desperate for this feature and are ready to use javascript, you can dynamically set the height of your content by setting it to the height of the window. I never did this, so I won’t tell you exactly how, but it should be easy to find with googling.

Answer 2

Ahaha! I think I got so far. This works in Firefox 3 and IE7. I will test some other browsers later. I still need to find out if any addition adds to my content.

To do this, I need this hierarchy 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 3

 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 it. That will work. Remove html, body selector, you don't need it.

Answer 4

This works for me in Firefox 3 and Safari 3. Doesn'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; } 

Answer 5

That should make it better.
No additional markup and / or identifier. No need to use javascript and / or expression in css.
Should work fine in 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 6

To center the page, I usually just place the contents of the div in the center tag, because margin-left / right: auto does not really work in all versions of IE.

To make a page full-height, you can fake it in several ways. My favorite is to create a background image for a body tag that is centered horizontally, but tiles vertically, so this will give the main div its white background. You probably still have a footer, so you can put it at the bottom: 0, and this should contain it at the bottom and give you a div that seems to extend to the entire page.