Using Auto Margins to Center DIVs with CSS - Completing the web page layout
(Page 4 of 4 )
In the section that you just read, I coded a sample (X)HTML file to illustrate how simple it is to build a fully-centered web page layout by means of CSS auto-margins. So, having on one hand this structural markup and on the other the CSS code that creates the layout, it’s necessary to merge these two layers into one single file. The code sample below does that:
<!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" />
<style type="text/css">
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,#footer{
padding: 10px;
background: #ffc;
}
#wrapper{
margin-left: auto;
margin-right: auto;
width: 800px;
}
#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;
}
</style>
</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>
Undeniably, constructing a centered web document layout by using CSS auto-margins isn’t rocket science. Of course, the previous example wouldn’t be complete if I didn't show you how this layout is displayed on a browser, so here’s a complementary image that illustrates the final result of this process:
Now that you’ve hopefully learned how to make use of auto-margins for building a centered, fixed design, feel free to play with all the code samples included into this tutorial to help you acquire a more solid understanding of how to use this CSS approach.
Final thoughts
In this third part of the series, you hopefully learned another CSS approach, popularly know as “auto-margins,” which can be used for building a centered web page layout quickly and with minor efforts.
However, as with everything in life, this technique has a small down side, since IE 6 doesn’t support auto margins when used in quirks mode. Regardless of this issue, it’s possible to build centered designs with auto margins that will be rendered correctly by most modern browsers.
In the forthcoming article, I’ll be discussing how to implement this CSS approach, this time for creating a liquid layout. Therefore, now that you’re aware of the subject of the next tutorial, you won’t want to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
