Center a Layout Using Containers
A centered layout is typically very pleasing on the eyes, as well as surprisingly simple to accomplish. This tutorial will teach you how to accurately center your layout in all resolutions using div containers in CSS.
Often, absolute positioning is used to center a layout. However, this results in a falsely centered layout that only appears centered in the resolution of its creator. Using div containers instead, this same layout can be centered in all resolutions.
The most important part of using containers to center a layout is of course the main container that houses everything. To center this container, you need to specify margin: 0 auto; in the container ID. This margin specification is key. To ensure that this container is centered in all browsers, you also need to specify text-align: center; in the body section of your CSS. This ensures that the layout will also be centered in old versions of Internet Explorer (five and under). Of course you can change this text alignment in other sections of your code.
Be sure to also define a width for your container. This width will be how wide your layout is. If you have a header image that you want to stretch across the entire top of your layout, you will need to make sure that the container’s width is the same as the width of your image. You can style the container however you would like, but this is just a basic example of what your code should look like so far:
body{
text-align: center;}
#container{
margin: 0 auto;
width: 700px;}
Next, you will need to define ID’s for a sidebar, for the main content section of your layout, and for a footer. Decide which you want to be on the left: the sidebar or the content. Float one to the left and the other to the right, as follows:
#sidebar{
float: left;
width: 25%;}
#content{
float: right;
width: 75%;}
Again, you may style the sidebar and content ID’s as much as you want, as long as they have both a float and a width element defined. The widths may be tweaked as well, as long as they remain in place. If you add padding, you will need to decrease these widths so that they no longer add to 100%. The perfect widths must be achieved through trial and error.
You also need to make sure that you define a footer. Even if you leave it empty, it is necessary to include a footer or the container will not continue down to the bottom of your sidebar and content sections. The styling clear: both; is essential here, as it places the footer after the previous floated elements (your sidebar and content):
#footer{
clear: both;}
It is not necessary to define a width for your footer, because it will automatically match the width of the container. As long as the clear: both styling remains in place, you can style the footer as much as you like.
Now you have all the CSS necessary to create a centered layout. To put it into action you need to use a bit of HTML in your <body> section. This is how it should look:
<div id="container"> <div id="sidebar"> All your sidebar content goes here. </div> <div id="content"> All your main content goes here. </div> <div id="footer"> All your footer content goes here. </div> </div>
Notice how the container div surrounds everything else, containing it in a nice, centered layout. 
Good luck, and feel free to contact me if you have any questions or comments regarding this tutorial.