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.
Next: Completing the development of the centered layout >>
More Style Sheets Articles
More By Alejandro Gervasio
