Using Auto Margins with Multiple Columns to Center DIVs with CSS
You may think that building centered web page layouts with CSS is an annoying experience, but guess what? This article series just might prove you wrong. It explains several CSS-based methods that you can use for constructing these kinds of designs very quickly, which should put a big smile in your face as soon as you start working with them. This article, the fifth one in the seven-part series, expands our use of the auto margin.
Using Auto Margins with Multiple Columns to Center DIVs with CSS - Building a centered web document layout with CSS auto-margins (Page 2 of 4 )
To demonstrate how the functionality provided by CSS auto-margins can be used for building a centered layout comprised of multiple columns, I will first define the markup of a primitive web page. Then, with this (X)HTML document available for testing purposes, I'll proceed to style each of its elements to achieve the aforementioned centered layout.
That being explained, here's how this sample web page looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example on centering DIVS with a liquid layout (uses CSS auto-margins)</title>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
</div>
<div id="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" id="about">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="leftcol">
<h2>This is the left column of the web page</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
</div>
<div id="maincol">
<h2>This is main section of the web page</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
</div>
<div id="rightcol">
<h2>This is the right column of the web page</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
</div>
<div id="footer">
<h2>This is the footer section of the web page</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
</div>
</div>
</body>
</html>
As you can see, the structure of the above (X)HTML page is very simple to grasp. It's comprised of three primary columns and a navigation bar, aside from the corresponding header and a footer sections. So far, noting unexpected, right?
Despite the simplicity of this sample web document, it'll come in handy for demonstrating how easy it is to build a centered, multi-column web page design, thanks to the assistance of CSS auto-margins. In the following section I'll be coding the group of CSS styles that will be charged with creating this design.
Thus, to see how this process will be performed, please click on the link that appears below and read the next few lines.
Style Sheets 
Using Auto Margins with a Liquid Layout to Center DIVs with CSS
