Using Auto Margins with Multiple Columns to Center DIVs with CSS
You may think that building centered web page layouts with CSS is an annoying experience, but guess what? This article series just might prove you wrong. It explains several CSS-based methods that you can use for constructing these kinds of designs very quickly, which should put a big smile in your face as soon as you start working with them. This article, the fifth one in the seven-part series, expands our use of the auto margin.
Using Auto Margins with Multiple Columns to Center DIVs with CSS - Adding CSS styles to the previous (X)HTML page (Page 3 of 4 )
In the prior section, I built a sample web document whose structure was made up of three primary columns, identified as "leftcol," "maincol" and "rightcol" respectively. Since this process doesn't bear any further discussion, I will now style these columns to construct a centric design.
Basically, the CSS code that renders this layout is as follows:
body{
padding: 0;
margin: 0;
background: #999;
}
h2{
margin: 0;
font: bold 18px Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
#header{
padding: 10px;
background: #ffc;
}
#wrapper{
width: 70%;
margin-left: auto;
margin-right: auto;
background: #fff;
}
#navbar{
padding: 10px;
background: #fff;
}
#navbar ul{
list-style: none;
padding: 0;
margin: 0;
}
#navbar li{
display: inline;
padding: 0;
margin: 0;
}
#navbar a:link,#navbar a:visited{
margin-left: 20px;
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
text-decoration: none;
}
#navbar a:hover{
background: #fc0;
}
#leftcol{
float: left;
width: 20%;
padding: 10px;
}
#maincol{
float: left;
width: 50%;
padding: 10px;
}
#rightcol{
float: right;
width: 20%;
padding: 10px;
}
#footer{
clear: both;
padding: 10px;
background: #ffc;
}
Other than properly positioning the main columns of the web page that you saw before, the above CSS styles show in a nutshell how useful auto-margins can really be for centering each of these containers in one single step.
In this case, the DIV identified as "wrapper" is actually the element responsible for achieving the centered positioning, since a value of "auto" has been assigned to its respective left and right margins.
Okay, do you now realize how easy it is to create a multi-column, centered layout with CSS auto-margins? I guess you do! Nevertheless, the CSS styles previously coded must be attached to the structural markup of the pertinent web page.
Therefore, if you wish to learn how this task will be carried out, read the following section. It's only one click away.
Style Sheets 
Using Auto Margins with a Liquid Layout to Center DIVs with CSS
