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.
Next: Tying the CSS styles to the structural markup >>
More Style Sheets Articles
More By Alejandro Gervasio
