Join or sign in Register for your free TechRepublic membership or if you are already a member, sign in using your preferred method below. Use Your Email Use FacebookUse Linkedin

Create a centered page layout with CSS

Locked

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

Topic

Important to Note

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.

Avoiding Quirks Mode

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

I’m shocked

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.

Reply To: Create a centered page layout with CSS

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

Reply To: Create a centered page layout with CSS

In reply to Reply To: Create a centered page layout with CSS

“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…

Standards Mode vs Quirks Mode on MSDN

In reply to Reply To: Create a centered page layout with CSS

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

This isn’t exactly what was described…

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.

venve

Centre on vertical axis

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?

[Author]

Replies