Fixed-width layout
« Previous: Alignment & floating | Next: Navigation menu »
To create a fixed-width central column, we need to wrap the entire contents of the page in a containing <div>. So, we open this tag right after the opening <body> tag:
<body>
<div id="container">
…
and close it just before the closing </body> tag:
…
</div>
</body>
Now, set the width of this container using the width property, and align it to the centre by setting its left and right margins to auto. It will need to have relative position, so that the navigation menu will be positioned at the left edge of this central column rather than on the left edge of the page itself:
#container {
width: 760px;
margin-left: auto;
margin-right: auto;
position: relative;
}
We can make the design fit together by applying background colours to the different elements. I'll remove the background colour from the navigation menu, then set background colours for the body, container and content areas:
body {
margin: 0;
background: #bbc7e8;
}
#container {
width: 760px;
margin-left: auto;
margin-right: auto;
position: relative;
background: #97ace7;
}
#content {
margin-left: 200px;
padding: 20px;
background: #fff;
}
The colour set for the container will create a left column which spans the entire height of the page. The colour set for the body will appear to either side of the central column.
Have a look at the fixed-width page. Now it's starting to take shape; the next step is to turn the navigation list into a more professional-looking menu.