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.
Next: Merging the presentation and structural layers into one single file >>
More Style Sheets Articles
More By Alejandro Gervasio
