STYLE SHEETS

Using Auto Margins to Center DIVs with CSS

If you’re a web designer searching for a comprehensive guide that shows you how to build centered web page layouts by using a few simple CSS styles and basic markup, look no further. Welcome to the third installment of a series that focuses on centering DIVs with CSS. By means of a hands-on approach, this series walks you through implementing some proven CSS-based techniques that will let you create different kinds of centered web document layouts in a truly painless way.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

April 02, 2009

TABLE OF CONTENTS:

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">

<head>

<title>Example on centering DIVS with a fixed layout (uses auto margins)</title>

body{

padding: 0;

margin: 0;

background: #999;

}

h2{

margin: 0;

font: bold 18px Arial, Helvetica, sans-serif;

color: #000;

}

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>

<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>

<ul>

<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>

<h2>This is main section of the web page</h2>

</div>

<h2>This is the footer section of the web page</h2>

</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.