CODEWITHSUNDEEP
htmlcssinternet-explorer
Shahid Karimi
Shahid Karimi

Reputation: 4357

Internet Explorer alignment issue

When placing fixed with DIVs center by using margin:0 auto. It is ok in all browsers except IE. How to fix this issue for IE so that the div center aligns in IE.

Upvotes: 0

Views: 6885

Answers (4)

Merete Hansen
Merete Hansen

Reputation: 21

Pffff... after trying all of the above solutions I was still stuck with my DIV floating to the left. In ALL IE browsers.

My solution is this:

body { text-align: center;}
#content { margin-left: auto; margin-right: auto; text-align: left;}

and voila - it works!

And people, a good place to check how your work renders in all browsers is www.browserstack.com. Then you don't have to have this crappy IE *@/&%%$$(( browser installed!

Upvotes: 2

clairesuzy
clairesuzy

Reputation: 27624

I think you mean a "fixed width div"?

if so What's your Doctype?

in Quirks rendering mode IE will not centre a div with margin: 0 auto;

First I would suggest you change to a Strict Rendering Doctype, so you can avoid many of IE's other quirks, but if you absolutely can't do that, then the following should do it for IE.

body {text-align: center;}
div {width: 500px; text-align: left; margin: 0 auto; background: #eee;}

<body>
  <div>this div is in the center, even in IE Quirks Mode</div>
</body>

the text-align: center should be set on the parent element of the one you want to center, then reset the text-alignment how you want it to be on the actual element..

However I really would like to stress that if the cause is indeed a Quirks rendering Doctype that changing it (or adding one if you've not got one!) would be the better solution.

Upvotes: 1

Michael Rose
Michael Rose

Reputation: 7820

If you have a fixed width, you can use the following css:

#content {
   position: absolute;
   left: 50%;
   width: yourWidth;
   margin-left: - halfYourWidth;
}

Upvotes: 0

easwee
easwee

Reputation: 15905

Define a fixed width to your element.

.myElement {
width:500px;
margin:0 auto;
}

Otherwise provide some code so we can see what exactly you are doing.

Upvotes: 0

Related Questions