Web Development

Ask something
Discussion Locked

Create a centered page layout with CSS

0 helpful
8 replies

by maryweilage

Closed to new repliesThis discussion is closed. It stays readable, but it takes no new replies.

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:
http://nl.com.com/MiniFormHandler?brand=builder&subs_channel=bldr_front_door&list_id=e614&tag=fb

8 replies

by john

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.

by meadhra

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

by andrew t. fry

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.

by meadhra

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

by davethewave

"Most Web builders now know how to avoid IE's quirks mode"

I don't but then I'm still fairly new to this game... Does anyone have links to "good" info on this subject? I can always do a google search but perhaps ya'll can save some time...

by venve9

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.

venve

by com-du-it.com

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?

This discussion is closed to new replies.