Designing for IE can be the biggest problem a developer faces. Among its various quirky bugs is the inability to center a div with margin:0 auto;. Here's a workaround I found.

Suppose you have layout like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Some title</title>
</head>
<body>
<div id='container'>
<!-- All your content goes here -->
</div>
</body>
</html>


Now, we are to position the #container to the center of the screen (whatever be the resolution of the monitor). To do so, we add a style tag and set text-align:center for body, i.e.
body {
 text-align:center;
}
This centers all the texts, divs, spans etc. This way the #container is also positioned to the center of the screen. But the problem remains as all the texts are centered which means the child elements of #container will also be centered. Our design certainly doesn't require us to center all elements. So, to cancel the centering of all child elements of #container, we add:
#container {
 width:960px; /* Variable width; can be anything */
 text-align:left;
 margin:0 auto;
}
Done! The above code resets the alignment of texts (and divs, spans etc.) to the left which is the default for all browsers.

[Via FlumpCake]

Labels: , ,

blog comments powered by Disqus