karinne
12-07-2006, 12:53 PM
The code is rather simple: margin: 0 auto; and a width: 780px (which should be changed to accommodate the width you have set-up for you site).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">
<head>
<title>Some title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
color: #fff;
}
#wrap {
margin: 0 auto;
width: 780px;
background-color: #900;
}
</style>
</head>
<body>
<div id="wrap">
this box is centered
</div>
</body>
</html>
If you need to support IE5 browsers, add a text-align: center; in the body { }. And you might also want to add a text-align: left; to #wrap { } to realign your text to the left ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">
<head>
<title>Some title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
color: #fff;
}
#wrap {
margin: 0 auto;
width: 780px;
background-color: #900;
}
</style>
</head>
<body>
<div id="wrap">
this box is centered
</div>
</body>
</html>
If you need to support IE5 browsers, add a text-align: center; in the body { }. And you might also want to add a text-align: left; to #wrap { } to realign your text to the left ;)