Using the Text-align CSS Property to Center DIVs - Styling the (X)HTML file: constructing a fully-centered web page layout
(Page 3 of 4 )
In the section that you just read, I created a primitive (X)HTML file, which was made up of the typical header and footer sections, as well as three main columns. Having at our disposal such a useful markup, it’s time to begin coding the set of CSS styles that will construct a fully-centered web page layout.
That being said, please take a look at the following CSS declarations, which take advantage of the functionality of the “text-align” property to create this type of page design. Here they are:
body{
text-align: center;
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{
text-align: left;
margin-left: 20%;
margin-right: 20%;
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;
}
Asides from styling the main columns of the previous (X)HTML file as well as the header and sections, you should pay close attention to the styles tied to the “body” selector and the “wrapper” container, since these two elements are actually key to properly centering the remaining DIVs.
On one hand, the body element is responsible for centering all of the main columns, while on the other hand, the general wrapping DIV is charged with resetting this alignment for all of the other containers. In both cases, it’s clear to see how useful the “text-align” property can be, particularly when it comes to building this kind of web page layout.
All in all, at this point I've demonstrated how to construct a fully-centered elastic page design, which is composed of three principal columns. So what's next? Well, in truth the previous CSS styles look rather disarticulated when analyzed separately. Thus, in the last section of this article I’ll be attaching them to the prior structural markup, in this manner completing the development of this web page layout.
However, to see how this process will be accomplished, you’ll have to read the next segment. It’s only one click away.
Next: Merging the CSS styles and structural markup in one single file >>
More Style Sheets Articles
More By Alejandro Gervasio
