Trick to Centering a DIV container in IE

There is a trick to centering a DIV container in Internet Explorer.  In FireFox, the margin: auto parameter does the trick and centers the div, but this is not the case with IE.

For some reason, you must center all of the elements in the BODY container for IE, and then manually set text align left (if that’s what you want) inside of your div. Fortunately, the text align property is inherited if you are nesting DIVs inside of a larger one.

This example is about as straight-forward as it can get on showing you how to set your style to center a DIV for both FireFox and IE.

There is a strange height bug in IE6 that you have to work around when you are using dynamically sized divs (overflow:auto). You may have to add extra spacing at the bottom of the div to avoid the bug.

References

Tags: ,
If you like this post and would like to receive updates from this blog, please subscribe our feed. Subscribe via RSS

Leave a Reply