Undoubtedly, one of the most common tasks that a web designer has to tackle when building the layout of a web document is centering the DIVs that comprise the document when using a table-less approach. If you’re starting to build your first centered web document layouts, then in this group of articles you’ll be provided with an approachable guide to several CSS-based techniques for creating this kind of web page design with minor hassles.
Centering DIVs with CSS - Aligning DIVs to the left side of the web page (Page 3 of 4 )
As you’ll surely recall, the centered web page layout that I built in the previous section caused all the contents of the DIVs to be aligned in the middle of the web document as well, a side effect that needs to be fixed quickly. In truth, solving this issue is much simpler than you might think, since it requires introducing a minor change in the CSS code that styles the main “wrapper” DIV of the document.
Since this containing element wraps all of the main columns of the web page, it will utilize the “text-align” property to place the respective contents of each DIV to the left side. The following CSS styles accurately reflect this small modification. Have a look at them, please:
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,#footer{
padding: 10px;
background: #ffc;
}
#wrapper{
text-align: left;
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 demonstrated above, the “wrapper” container now includes a new CSS declaration that places the contents of all the DIVs to the left side of the web document, via the “text-align” property:
#wrapper{
text-align: left;
margin-left: 20%;
margin-right: 20%;
}
Indeed, the above CSS code is fairly simple to follow, right? At this point, having demonstrated how to use the “text-align” property for resetting the respective positions of all the DIVs that are included in the main wrapper element, it’s time to list the complete source code of this centered web page layout, after incorporating the aligning improvement.
This will be accomplished in the final section of this tutorial, so go ahead and read the next few lines.
Style Sheets 
Using Auto Margins to Center DIVs with CSS
