Using Auto Margins with a Liquid Layout to Center DIVs with CSS
Often, when building a web site, web designers must construct centric layouts with CSS. While accomplishing this task requires only familiarity with the basics of style sheets and (X)HTML, building layouts like these can be challenging, particularly for beginners. So, if you’re interested in learning different CSS approaches that permit you to create fully-centered web page layouts without suffering premature hair loss, keep reading. This is the fourth part of a series of articles that shows you how to center DIVs with CSS.
Using Auto Margins with a Liquid Layout to Center DIVs with CSS - Working with CSS auto-margins (Page 3 of 4 )
In the previous segment, I built a basic web page to help demonstrate how easy it is to create a fully-centered liquid layout using auto-margins. Having at our disposal the structural markup of the page in question, it’s time to add to it a set of CSS styles which will be responsible for constructing the centered layout. Essentially, the styles required to accomplish this task are the following:
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,#footer{
padding: 10px;
background: #ffc;
}
#wrapper{
width: 70%;
margin-left: auto;
margin-right: auto;
}
#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;
}
#maincol{
clear: both;
padding: 10px;
background: #fff;
}
As shown before, the above group of CSS styles permits us to quickly build a centered web page layout, thanks to the functionality provided by auto-margins. In this case, you should notice that the main wrapper DIV has been assigned a width of 70%, while its respective left and right margins have been declared with a value of “auto.”
So far, so good, right? At this point, you hopefully grasped the logic that stands behind building centered layouts by utilizing CSS auto-margins. Next, I will simply group the CSS styles coded before with the previous structural markup to complete the development of this centered web page design.
To learn the full details of this process, please click on the link that appears below and read the following section.
Style Sheets 
/ 3 
Using Auto Margins to Center DIVs with CSS
