My sites main div looks complete mess in IE 7 and 8

Question

Hi friends, my site's main div is floated left in some page and right in some page in otherpage it's scattered everywhere in IE 7 and 8, I didn't even bother checking in IE6, while it's perfect in IE 6.

Please help, div is as below. Is there a way to fix the div to center no matter what browser ? Is there any hack ?

div.main {
margin:70px auto;
width:80%;
}

Answer 1

set the body style to text-align:center; and the div margin:auto;

this should work in all browsers

Answer 2

Older versions of IE require that you break apart the margin, like so:

margin-left:auto;
margin-right:auto;
width:80%;

Another option is to only set the margins, not the width. This will give you a different result depending on what you are looking for:

margin-left: 10%;
margin-right: 10%;

A really old hack to try is this:

body {
text-align:center;
}

div.main {
margin-left:auto;
margin-right:auto;
text-align:left;
width:80%;
}

The key is just be sensible and creative to get CSS to work properly in old versions of IE. Don't do anything that will break newer browsers. In the case of the last hack, nothing would change in newer browsers so it is safe to use.

Answer 3

There is nothing wrong with that code, it works fine in all modern browsers, and even IE 6.

The reson for your problem is probably some other elements in the page that is breaking the layout. You cah use a tool like the FireBug add-on in Firefox to examine the elements and see what styles are actually applied to the elements.

Check that you have a proper doctype tag at the top of the page (and no XML tag before it), so that the page renders in standards compliant mode. IE is especially sensetive to this, as it uses a non-standard version of the box model when it renders in quirks mode.