General discussion

  • Creator
  • #2288817

    Create a centered page layout with CSS


    by maryweilage ·

    This week’s Design and Usability Tactics e-newsletter describes how to create a centered page layout with CSS.

    Does this tip provide you with the necessary information for creating a centered page layout with CSS? Will you use these tips in your development work? Please let us know.

    If you aren’t subscribed to the free Design and Usability Tactics e-newsletter, click the following link to automatically sign up:

All Comments

  • Author
    • #2714523

      Important to Note

      by john ·

      In reply to Create a centered page layout with CSS

      It’s important to note for browser compatibility and to avoid quirk mode rendering, this method currently only works when a STRICT or TRANSITIONAL DOCTYPE declaration is implemented.

      It also does not work in IE if you include:

      above your DOCTYPE.

      • #2713668

        Avoiding Quirks Mode

        by meadhra ·

        In reply to Important to Note

        It’s true that for this technique (and nearly all other CSS techniques) to work properly in Internet Explorer, IE must be operating in standards mode rather than quirks mode. That means you must include a proper DOCTYPE declaration, and nothing, not even an XML prolog, can preceed that DOCTYPE.

        I’ve written about rendering modes and DOCTYPE switching before, and I assumed that it had reached the level of “common knowledge”. But maybe it’s time to revisit the topic.

        Michael Meadhra

    • #2714445

      I’m shocked

      by andrew t. fry ·

      In reply to Create a centered page layout with CSS

      I thought you were all about the majority broswer IE Michael. Yet you specifically say not to use the “text-align: center;” on a parent object, because it’s a “misuse”, despite it’s requirement for the majority of the IE versions; if you also use an XML declaration, that includes 6.

      • #2713660

        Reply To: Create a centered page layout with CSS

        by meadhra ·

        In reply to I’m shocked

        I’m not “all about the majority broswer IE”. On the contrary, I prefer working with clean code that’s written to perform properly in standards-compliant browsers. But I’m a realist, and as such, I can’t ignore the dominant browser and its various ideosyncracies, no matter how much I would like to at times.

        The realist in me causes me to avoid valid CSS techniques that don’t work in IE at all. However, I’m all for any CSS technique that I can get to work in most browsers, including IE in its standards mode (such as it is). Most Web builders now know how to avoid IE’s quirks mode and do so routinely, so that’s hardly a limitation or special circumstance anymore — or at least, so I thought. The comments posted today lead me to believe that I may need to revisit the topic of quirks mode vs standards mode.

        Michael Meadhra

    • #2704132

      This isn’t exactly what was described…

      by venve9 ·

      In reply to Create a centered page layout with CSS

      It’s an excellent article but one point needs to be clarified. The opening paragraph says we’re building an 800 pixel div which will be centered, but that’s not what was demonstrated. We’ll get that only on a 1024 wide window. The “width: 80%” says the browser will render it 80% of whatever the window size is. It would need to be “width: 800” to create an 800 pix div. I was working on building a centered page over the weekend so this article answered a real question for me. Thanks for showing how to set it up.

      As for the quirks vs standards mode, I could use a revisit on that, too. I’m just branching out into CSS so I’m sure it would help me to know it. If you can demonstrate how to get absolute positioning to work the same in both IE and NS, that would be cool, too.


    • #2712441

      Centre on vertical axis

      by ·

      In reply to Create a centered page layout with CSS

      I understand using margin: auto to create a centred effect but it only seems to work on the horizontal axis. How do I centre on the verticle axis?

Viewing 3 reply threads