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.
Submit an article or tip