STYLE SHEETS

Centering DIVs with CSS

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

March 19, 2009

TABLE OF CONTENTS:

If you’re like me, then you may want to have available in one place the full source code of the previous centered web page design, including the modified CSS styles along with the corresponding structural markup. Therefore, below I included this initial example, so that you can test it more easily on your own web server. Here it is:

<!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 liquid layout (uses the text-align property with the body element)</title>

body{

text-align: center;

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{

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;

}

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

As I said before, the previous sample (X)HTML file is all the source code that you’ll need for building a simple centered web page layout that takes advantage of the functionality given by the “text-align” CSS property. In addition, you can clearly see the output generated by this file in the following image:

Without a doubt, this CSS approach is one of the easiest to implement for centering DIVs within a web document, even when it demands coding some additional CSS styles. Thus, if you use it to create simple layouts like the one shown previously, this method might be a good option to learn.

Final thoughts

In this initial chapter of the series, I explained how to build a simple centered web page layout by assigning the “text-align” CSS property to the body selector. As you saw for yourself, this technique presents a flat learning curve and can be mastered with only a basic background in CSS.

In the next part, I’ll be discussing how to employ this approach for building a fully-centered web page layout comprised of three main columns. Now that you’ve been warned about the subject of the upcoming article, you can’t 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.