How to center an element in quirks mode

8. April 2008 – 03:57

It has been my problem because I needed to use quirks mode due to Ext not playing well in standards compliant mode and still have an element, a container with fixed width, centered in the browser’s window working cross-browser.

Standard approach is to use css:

#ct {
    width: 960px;
    margin: auto;
}

Nice and simple but it doesn’t work in IE in quirks mode, works in strict mode though.

Another approach I’ve found googling for a solution was:

body {
    text-align: center;
}
#ct {
    width: 960px;
    margin: auto;
    text-align: left;
}

This works, also in IE, but the problem is that Ext creates many elements as direct children of the body so it introduced many rendering problems such as menu items appeared centered, combo box dropdown items were centered, messages in message boxes, etc.

Finally, this works everywhere without bad side effects:

#ct-wrap {
    text-align: center;
}
#ct {
    width: 960px;
    margin: auto;
    text-align: left;
}

with this markup:

<body>
  <div id="ct-wrap">
    <div id="ct">
    </div>
  </div>
</body>

We do not touch body here but we create a “container wrap” that center aligns texts and inside of it our real container in which we set text alignment back to left.

Works perfect cross browser.

One Response to “How to center an element in quirks mode”
Thanks a lot! One of my clients insist editing their page in a program that removes the doctype! I\’ll definitely try this!

By allan on Oct 23, 2009

Saki’s Blog