Center align a container in IE

May 16th, 2008 | Save to del.icio.us now(0)

Today i faced a problem while trying to center align my main div in IE6.

The Problem

#main
{
    width:960px;
    margin:0 auto;
}

This made my div to align itself in the center in firefox and Internet Explorer 7 but, it failed to do the trick for IE6.


After some googling i found following solution on Webcredible.co.uk website. I added my “simple css hack” to make sure it was available only in Internet Explorer.

The Solution

body
{
     _text-align:center;
}
#main
{
     width:960px;
     margin:0 auto;
     _text-align:left;

}

That’s it, we are done this will center align the container in the center of the browser window

Related posts

  1. Center align a container in IE
  2. Simplest Css Hack Ever
  3. 5 key skills of a successful web application developer

Wondering what to do next?
Grab my feed
Catch Me On Twitter


Filed under css | Comments (8)
(Search web development related contents)


8 Responses to “Center align a container in IE”

  1. June 5, 2008 4:17 pm Donald Organ says

    i dont know setting the following properties works for me

    margin-left:auto;
    margin-right:auto;

    That always seems to do the trick in IE and firefox.

  2. July 18, 2008 12:13 pm Piers Johnson says

    You don’t need to use that hack, if you use the strict DOCTYPE margin: 0 auto will work in IE6 as it would in all other browsers.

  3. April 8, 2009 5:05 pm Fawaz says

    Dude your hack worked like a magic ….. Thanks man ….

  4. June 10, 2009 3:36 pm dz says

    Amazing hack. I was pulling my hair out over this problem that the strict doctype would not solve as the padding is strange for IE6 for strange reasons.

    Thank you!

  5. July 21, 2009 5:54 pm Martin says

    It’s an amazing trick! Thanks!

  6. November 5, 2009 11:29 am Jake Pucan says

    I agree with Piers Johnson says

  7. February 26, 2010 10:30 pm itsAsecret says

    margin-left:auto;
    margin-right:auto;

    This is the same as

    margin:0 auto ;
    ddduuuuhhh, its the shorthand

  8. April 19, 2010 11:26 pm Vivekanand says

    Hi All,

    I would like to go with Piers Johnson – since when you make the DOCTYPE to Strict and if it is of HTML 4.0 then margin:0 auto; would work in all browsers.

    1. DOCTYPE – Default – HTML 4.0, margin:0 auto; would not work -> for this you need to add text-align:center;
    2. DOCTYPE – Strict – HTML 4.0, margin:0 auto; would work in all browsers
    3. DOCTYPE – Default – XHTML, margin:0 auto; would work like a charm

    This is what I have discovered, when I was working for a project. Its a good R&D for me – hope this might help others…..

    Cheers!
    Vivek [Founder of http://www.developersnippets.com

Trackback URI | Comments RSS

Say Something, and Be Counted

Name (required)

Email (required)

Website

Speak your mind