One way to do it (the way I normally do) is to have a fixed-width container div with its left and right margins set to auto. You can dowload a basic layout:
Here[
^]
though you might find its
parent gallery [
^]useful if you have header and footers etc.
[Edit]
The Html is:
<html>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="wrapper">
<div id="content">
Your main content goes here
</div>
</div>
</body>
</html>
The above creates a div to wrapper (called
wrapper
) everything you want to put in the middle. It is likely that you will want to put more than one div in this wrapper (for header, content and footer). I have only left the content (called
content
) in. To center the wrapper on the page (including its child header footer and content) give it a fixed width and set its left/right margins to auto.
The css:
* { padding: 0; margin: 0; }
body {
background-color:Green;
}
#wrapper {
margin: 0 auto;
width: 922px;
background-color:Red;
}
#content {
background: Yellow;
}
This is a simplified version of the template in my first link.