Center an HTML page with CSS

Posted on
By Addam Driver

Ok… Here is one of the most frustrating things ever. HOW TO CENTER AN HTML PAGE WITH CSS! I use to do this by wrapping the page inside a div and centering that div. It works and it’s solid but if you want to use a true CSS method, check this out.

FRIST!
This will only work if the DOCTYPE is XHTML Transitional or Strict. IT WILL NOT WORK if your doctype is HTML 4.x. Here is an example of what it should look like:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

NEXT!
Put this at the top of your CSS file and you will be good to go!

#html, body {

  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width:980px;
  height: 100%;
  margin: auto;
}

** Again this works in ALL BROWSERS including IE6. If you want it to see it in action, just GO TO THIS SITE using different browsers. Cheers!

Tags: , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CSS Methods

HTML Goodies

JavaScript

mustache

node.js

The HTML Writers Guild IWA