Building a Liquid Design with Evened Margins and Centered CSS DIVs
If you’re a web designer who wishes to learn how to build fully-centered web page layouts using CSS, you've come to the right place. Welcome to the final installment of a seven-part series on centering DIVs with CSS. This series shows you how to take advantage of the functionality provided by different DIV alignment techniques to construct centered web page designs, which can be incorporated into any existing site with minor effort.
Building a Liquid Design with Evened Margins and Centered CSS DIVs - Centering DIVs with evened CSS margins (Page 3 of 4 )
In the prior section I defined the structural markup of a sample web page, so the next step I'm going to take consists of coding a group of CSS styles, which will be tasked with constructing the pertinent centered layout, in this case by way of evened margins.
That being said, here's the definition corresponding to the CSS styles:
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{
margin-left: 20%;
margin-right: 20%;
}
#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 depicted above, it's actually very simple to build a liquid, centered design by using evened CSS margins. In this case, the DIV identified as "wrapper" is the element that really does the hard work, since a value of "20%" has been assigned equally to its left and right margins. In doing so, all of the other descendant elements will be centered on screen, thus achieving the desired design. Pretty easy to grasp, isn't it?
So far, so good. At this stage, you hopefully learned how to apply evened CSS margins for quickly constructing a centered web page design. So what's next? Well, if you're anything like me, you want to see how the previous CSS code can be tied to the corresponding markup of the sample web page.
Thus, in the final segment of this tutorial I'll be defining a brand new (X)HTML file, which will put these two layers to work together.
To see how this sample file will be created, please click on the link below and keep reading.
Style Sheets 
Using Auto Margins to Center DIVs with CSS
