Center your website design

the easy and fast way

2008 December, 31th

HTML

The only thing you need is a container block-element with an id wrapping your website design:

      <div id="wrapper"></div>

Make sure it is inside the body tag.

CSS

First you need to align the body text to center, to get it to also work in IE 6:

      body {
        text-align: center;
      }

Then add this CSS for your wrapper div to center the design, and overriding back to left-aligned text:

      #wrapper {
        margin: 0 auto;
        text-align: left;
      }

Done!

This will center your design with automatic values for margin-left and margin-right, and make sure it also works in IE 6 by setting text-align to center for the body tag.

CSS Articles