Auto Margin not working in Internet Explorer

Problem

You have a web page design which automatically centers in Firefox and other browsers, however Internet Explorer does not center. Instead the DIV elements which are meant to center are left adjusted.

You are using margin: 0 auto; to do the centering.

IE-AutoMargin1

Solution

This issue can happen for a few reasons, including coding errors in the HTML and CSS.

Here are some tips which will hopefully help you fix the issue.

TIP 1: Internet Explorer requires DOCTYPE declaration

Check your HTML to ensure you have included a DOCTYPE declaration.

When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. The doctype declaration must be exact (both in spelling and in case) to have the desired effect, which makes it sometimes difficult.

More information: http://www.w3.org/QA/2002/04/valid-dtd-list.html 

TIP 2: Internet Explorer requires the DOCTYPE to be on the first line of the HTML

Same as above, but as an additional qwirk with Internet Explorer the DOCTYPE must be the first first line of the HTML.

Other browsers can cope with the coding error, however Internet Explorer does not. Instead it goes into ‘qwerks mode’ (debugging) – generally this causes other issues as well.

TIP 3: When using ‘margin: 0 auto;’ you must specify the width

You must specify the width in the same DIV element you’re using ‘margin: 0 auto;’ with.

For example, all DIV elements inside ‘main-content’ need to be centred you would use the following CSS code.

#main-content {


    margin: 0 auto;
    width: 80%;
}

TIP 4: Install Firefox and the Firebug plugin – examine the HTML and CSS

Failing this, I suggest you install Firefox and the Firebug plugin and take a very close look at  your HTML and CSS.

Below is an example of valid HTML which will centre in Internet Explorer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>An XHTML 1.0 Strict standard template</title>
    <meta http-equiv="content-type"
        content="text/html;charset=utf-8" />
</head>

<STYLE>
#main-content {
    margin: 0 auto;
    width: 80%;
}

</STYLE>

<body>
<div id="header">
Header Contents - not centered
</div>
<div id="main-content">
<div id="content">
     <H1>Main content - is centered.</H1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit, urna et facilisis ultricies, enim erat ultricies nisl, ut ultricies urna felis eget dolor. Ut id mauris quis sem consequat mollis. Sed laoreet tincidunt est vel dapibus. Vivamus eu libero ligula. Curabitur mollis, dui a malesuada malesuada, nunc nisl dictum dui, interdum feugiat sapien mi vel elit. Suspendisse auctor cursus ante in facilisis. Proin nisi velit, commodo vitae vestibulum quis, aliquet sit amet lacus. Sed adipiscing justo ut erat volutpat congue. Aenean augue sem, commodo et tempus sed, luctus ut ante. In in vehicula nibh. Ut sed diam ut leo vulputate porttitor.</p>

     <p>Praesent sit amet sem leo, vel laoreet sem. Praesent tincidunt enim dui. Proin urna quam, tincidunt ut gravida ac, ultrices nec felis. Vivamus arcu massa, consequat eget mollis a, lobortis sit amet justo. Quisque tristique nisl nec erat mollis tincidunt. Suspendisse potenti. Vivamus est ante, gravida at congue eu, imperdiet a sapien. Donec et orci sed eros tincidunt ultrices eu nec purus. Morbi eu dignissim risus. Morbi consequat nisl quis justo molestie varius in ut sem. Duis id purus sit amet orci egestas vestibulum sed et lectus. Ut vestibulum aliquet nunc at auctor. Aenean faucibus dictum urna, quis volutpat urna sollicitudin quis. Suspendisse in turpis ante, eget ultricies purus. Duis eget magna sed nibh scelerisque tincidunt eu vitae nunc. Aliquam fringilla lobortis commodo.</p>
</div>
</div>
</body>
</html>
This will look like:
IE-AutoMargin2