Gelaed | Centered DIV Happiness

Browser Conflicts

The problem with centering a div is that different browsers implement certain tags in different ways. Certainly, the anchor (a) tag will be pretty much standard, although there are some exceptions even there. The div tag, on the other hand, is implemented quite a bit different. Different browers will display a div with different margins, different padding, and definitely different alignment.

Regardless of which browser you are writing for (hopefully at least Mozilla and Internet Explorer), you will need to declare a width for the div you wish to center. By default, a div is as wide as it can be, and centering a full-width div doesn't change it.

Working with Mozilla

Mozilla (and Netscape 6) will display a div perfectly centered as long as the left and right margins are both set to "auto," by using stylesheets.

<div style="width:600px;
 margin-left:auto; margin-right:auto;">
    Content Goes Here
</div>

see this example in action

Internet Explorer, on the other hand, will act as though left and margins were not even declared if you try that same trick. So, you can please the Mozilla crowd, but the Internet Explorer crowd is still forced to view the div uncentered.

Working with Internet Explorer

An equally easy fix for Internet Explorer is to declare the text-alignment of the element containing the div as "center". In the case of Gelaed.com, the element containing the div we wish to center is the body. Easy enough, we just declare that the body text-alignment is "center".

<body style="text-align:center;">
    <div style="width:600px; text-align:left;">
        Content Goes Here
    </div>
</body>

see this example in action

It is also necessary to declare the text-alignment for the div we wish to center, lest the text inside the div inherit the alignment from body.

Of course, this example does not work in Mozilla. Mozilla does exactly what the alignment specifies; it centers the text. Mozilla leaves the div alone, as it should.

Cross-Browser

To make our examples cross-browser compatable, we simply combine them.

<body style="text-align:center;">
    <div style="width:600px; text-align:left;
     margin-left:auto; margin-right:auto;">
        Content Goes Here
    </div>
</body>

see this example in action

Internet Explorer simply ignores the margin specifications, and Mozilla treats the alignment specification correctly. Both browsers now display the same thing.