DHTMLdev.com — Dedicated to quality Web development articles and tutorials
Centering A CSS Layout PDF Print E-mail
Wednesday, 12 April 2006

A common need in Web design is a centered layout. But many people have problems coding it using CSS. In past years, centering a page was done with the <center> element. The current method to center a page is using CSS, but due to browser incompatibilities, it's a little tricky.

Example

Here is an example page showing a CSS centered layout.

Out With the Old Center Tag

Web designers cannot depend on the <center> tag forever. The <center> element has been deprecated since HTML 4.0. 

 
<center>
<div>
<p>This content would be centered in the layout.</p>
</div>
</center>

Out with the Old Table Layout

If you are using tables for layout, you might be using the align attribute to center the table. That works, but does not seperate presentation code from content, because the align attribute is in the HTML markup tag. That works, but is not the way that Web design is headed. It would be better to seperate your presentation code from your content. 

 
<table align="center" width="400">
<tr>
<td>This table would be centered in the layout.</td>
</tr>
</table>

In With the New CSS Method

Using CSS, you can remove all the presentation code from the HTML code. You center a layout by setting the CSS margin property to adjust the side margins of the content container relative to the page width. Then set the width of the content container, in this case a div element, to less than the width of the page.

Centering a Fixed Width Layout

This example shows how to center a fixed width layout with a width of 400 pixels. Setting margin to auto will make the browser automatically equalize the margins on each side of the content div, which centers it in the page. 

 
<style type="text/css">
div#content
{  margin:auto;
  width:400px;
}
</style>
<div id="content">
<p>This content would be centered.</p>
</div>

Centering a Fluid Width Layout

This example shows how to center a fluid layout where the width adjusts to the width of the browser window. It is basically the same approach as centering a fixed width layout, except that we change the width from a fixed value in pixels to a percentage value. 

 
<style type="text/css">
div#content
{  margin:auto;
  width:80%;
}
<style>
<div id="content">
<p>This content would be centered.</p>
</div>

Conclusion: Browser Support

As you can see, centering a layout using CSS is very easy. But there is a catch: you need to have a modern Web browser, such as Firefox or Internet Explorer 6. And if you are using IE 6, it must not be in Quirks Mode. So make sure that you use a DOCTYPE declaration at the top of your HTML files, esp. for Internet Explorer.

Add a DOCTYPE

Here is an exampe DOCTYPE statement. I am sure you have seen one of these at the top of the code in an HTML file. Now you see a good reason for using it! 

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Watch Out for the XML Prolog

Also, there is one final thing you might need to do to make this work in IE. If you hae an XML prolog at the beginning of your file, you will need to remove it. IE will revert to quirks mode when the file contains an XML prolog, and then the margin:auto CSS will not behave properly.

So if you have a line of code similar to this at the top of your HTML file(s), remove it. 

 
<?xml version="1.0" encoding="iso-8859-1"?>

Happy Centering!

Last Updated ( Thursday, 13 April 2006 )
 
< Prev   Next >
[ Back ]