Here is the CSS we will use

#wrap {
    width: 760px;
    margin: 0px auto 0px auto; /* top, right, bottom, left */
    padding: 10px;
    border: 1px solid #000;
    background-color: #eee;
}

This is the HTML to use on your site

<div id="wrap">
<!-- YOUR SITE CONTENT GOES HERE -->
</div>

The "wrap" or box will be horizontally centered in the browser. Now in modern browsers you could stop here but we don't want to forget about the others that have a lack of CSS2 support.

A great article addresses this fact so I will link you to that now. http://bluerobot.com/web/css/center1.html

That is all it takes to center your designs in most of the browsers.

Next time we will tackle relative font sizes using percents instead of pixels.