Using Auto Margins to Center DIVs with CSS - Adding CSS styles to a sample web document with some structural markup
(Page 3 of 4 )
In the prior section, I demonstrated how to build a centered web page layout by means of CSS auto-margins. This process would be rather incomplete, though, if I didn't show you the structural markup that complements the correct implementation of this approach.
With that idea in mind, below I listed a basic (X)HTML file, which will come in useful for illustrating how to utilize auto-margins in a concrete case. The file looks like this:
<!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 fixed layout (uses auto margins)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h2>This is the header 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="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="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="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>
Essentially, the above (X)HTML file is the same that I used in the two previous parts of the series, when I discussed the utilization of the “text-align” CSS property, so you shouldn’t have major inconveniences understanding its simple structure.
As depicted above, this file is comprised of header and footer areas, in addition to a simple link bar and a contents section. It’s that simple.
Okay, now that I've created the bare bones structure of a web page, the last thing that I’m going to show you in this article will consist of linking this markup to the CSS styles that you learned in the preceding section, in this way completing the construction of a centered web document layout using CSS auto-margins.
This procedure will be discussed in detail in the following section. Thus, click on the link below and keep reading. We’re almost done!
Next: Completing the web page layout >>
More Style Sheets Articles
More By Alejandro Gervasio
