Simple web design, web development, information technology, & technical communication

Articles and resources for web developers and the average person. Topics include web development, web design, technical writing and communication, and all aspects of information technology.

Horizontally center layout in CSS

Originally published on Wednesday, December 21st, 2005

A good way of dealing with users on different screen resolutions is to center your Web design horizontally. This will ensure, regardless of the user’s screen size, that there is an equal amount of space to the left and right of the main design area, producing an overall "fuller" look to your site. Unfortunately, getting your design perfectly centered in all browsers can be a bit frustrating. Here’s a quick trick to make sure your design is centered for all users, regardless of their browser.

Sample Code for centering layout using CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Center On Any Screen Size</title>
<style type="text/css">
body {
text-align:center;
}
#container {
margin:0px auto 0px auto;
width:400px;
border:1px solid #000000;
background-color:#CCCCCC;
}
</style>
</head>

<body>
<div id="container">
Some text goes in here
</div>
</body>
</html>

Center the design for Internet Explorer browsers

One of the wonderful things about Internet Explorer is that it does not adhere to many CSS standards (I’m being sarcastic– obviously this isn’t wonderful). As a result, many Web designers will resort to "hacks" to make their design cross-browser compatible. For our goal of centering our design using CSS, we need to use one such hack.

Internet Explorer should see the "margin:0px auto 0px auto" declaration and center our "container" layer. Guess what? It doesn’t. The workaround is to place a declaration in the body element of our CSS code— "text-align:center". Technically speaking, this should center text, not entire elements. In IE, however, it centers our entire container <div>. Whatever, as long as it works.

Center the design for Firefox, Netscape, Safari, Opera browsers

Most other browsers correctly interpret the margin attributes of the container <div> and center the element correctly. The order of values in margin:0px auto 0px auto is top, right, bottom, left. With these values we’re telling the browser to leave a margin on top and bottom of 0 pixels, and leave an even space to the left and right (auto). Man that’s easy!

"Un-centering" the text on screen

Our hack to center the design in IE will have a potentially undesired side effect— all of our text inside the "container" div will be centered as well. The workaround is to add an additional layer, and set the text-align attribute to "left". Here’s the sample code of everything in action:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Center On Any Screen Size</title>
<style type="text/css">
body {
text-align:center;
}
#container {
margin:0px auto 0px auto;
width:400px;
border:1px solid #000000;
background-color:#CCCCCC;
}
#mainContent {
text-align:left;
}
</style>
</head>

<body>
<div id="container">
<div id="mainContent">
Some text goes in here
</div>
</div>
</body>
</html>

CSS centered design wrapup

Using the margin property of a layer and a simple hack for IE, we can easily center our Web design using CSS. Finally, no more listening to clients complain about "all that white space to the right of the screen on my 1280×1024 resolution!"

This article was written by Christopher Jason and published on Wednesday, December 21st, 2005. You can follow any responses to this entry through the RSS 2.0 feed.

4 Responses to “Horizontally center layout in CSS”

  1. Art Hanson Says:
    January 11th, 2007 at 1:54 pm

    Thanks, but I’m still having a problem with IE. In Mozilla and Netscape, the container remains independent of the text outside the container and positions properly. In IE, all subsequent text falls below the container. I do not want to put the entire page in the container.

  2. Christopher Jason Says:
    January 11th, 2007 at 11:43 pm

    Hi Art-

    Can you provide a link to what you’re working on? I can then take a look and see where the trouble is.

  3. Codies Says:
    June 10th, 2007 at 8:43 pm

    Hi Jason,

    Thanks for writing this info, but you dont need the second div to counter the side-effect of “text-align:center”.
    you can just put the “text-align:left” in the #container

  4. Andrew Says:
    July 24th, 2007 at 4:48 pm

    IE is a major thorn in the side of all web-developers. Quite possibly the worst piece of software I’ve ever been forced to use. Using all these tricks… IE still will not center my template in my ebay store. Firefox works great.. and the template centers in IE when it isn’t in an ebay listing. As soon as it’s in an ebay listing the “centering” goes out the door in IE. The existence of IE alone adds about 30% more time to any web project…. while you try to figure out how to make it conform to the standards that Microsoft feels they can ignore.

Add a Comment

You must be logged in to post a comment.

Articles By Category

Stay Updated