A c t i o n f o r L i b r a r i e s — J a n u a r y 2 0 0 4

The Internet Connection

By Michael Sauers

Cross-browser Centering with CSS
Many Web-page designers are moving away from using tables for Web-page layout and instead are gradually adopting the preferred layout methods found in CSS. However, they quickly run into a snag while attempting to center their content in a Web page.

Using the table layout method, if we want our content to take up the middle 600 pixels of a screen, we simply place the content within a table, set its width to 600 pixels and center the table. The code will look something like this:


<table width="600" align="center"> 

content

</table>

However, a problem arises when we attempt to accomplish the same layout without using tables, but instead use CSS and expect it to work in Netscape and Internet Explorer, as well as other Web browsers. There is a solution, but let's first look in more detail at the problem.

The proper way to center a block of content within a document using CSS is to use the "auto" value on the margin property. Here is the code that would accomplish the same centered result as the table-based code above:


CSS

.wrapper{width:600px;margin-left:auto;

         margin-right: auto}

XHTML

<div class="wrapper">

content

</div>

We've called the class "wrapper" because we are wrapping the content within a block. We've set the width of the block to be 600 pixels and then directed both the left and right margins to adjust themselves automatically, thus causing the block to appear in the center of the screen. Although this works well in most browsers, including Netscape, Mozilla, Firebird and Opera, it does not work in Internet Explorer (IE), as that browser does not support the "auto" margin value. So, we need a work-around to take this into account.

Here is the code that will work in IE:


CSS

.wrapper{width:600px;text-align:center}

.content {text-align: left}

XHTML

<div class="wrapper">

<div class="content">

content

</div>

</div>

In this case, we've removed the unsupported code and told the browser to center the content of "wrapper." However, not only will this center the content in "wrapper," it will also center the whole block. This is an incorrect implementation, but that is the format accomplished with this code in Internet Explorer. Since we've centered everything within "wrapper," we then create a "content" block in which everything is left-justified. In the end, we are left with a centered block with left-justified content; just what we wanted.

Are, we done? Of course not. The IE version we've just created will not work in the other browsers since they will correctly not center the "wrapper" block, just the block's content. In this case, Netscape will display our "wrapper" block along the left edge of the screen.

So, what's the solution? We need to combine the two codes:


CSS

.wrapper{width:600px;margin-left:auto;

          margin-right:auto;

          text-align:center}

.content {text-align: left}

XHTML

<div class="wrapper">

<div class="content">

content

</div>

</div>

This code correctly applies the auto margins in the browsers that understand it, as well as provides the workaround needed for Internet Explorer, giving us the result we want in all the current Web browsers.

Next Article | Previous Article | Table of Contents | BCR Publications