Centering web pages: still easy?
Posted by Jesse Rodgers on August 17, 2005 at 05:44 AM
A while back now I wrote about centering the easy way where I used some position:relative and margin: 0 auto; in the body tag to get the effect. There were more changes required of course. The changes were made to the central CSS last week and they didn’t cause too many problems actually (yay). There was of course a couple of problems:
- Anything above the doctype will cause IE quirks mode and thus mess up your CSS – this would have caused problems before (cascade rules not being honored in tables, etc) as well but they weren’t as obvious,
- Not calling the central CSS and having your own copy. That is understandable given DW not rendering the CSS unless it is local. Just remember to update your local CSS.
- Page shift brought on by the appearance of the browser scroll bar in the right.
Then of course there was a really strange problem that was seen with most pre-1.0 versions of the XHTML. A span was missing or in the wrong spot:
<span class="none"><a href="#content">Skip to the content of the web site.</a></span>This does nothing but for some reason influenced the cascade. Symptoms were the right and left navigation margins for placement were aligned with the #contentbar in IE 6. To me this suggests a problem with the CSS but I am not sure what do about it.
Really the CSS way of centering using the body tag is a hack that is kinda dirty. The cleanest way to center pages is with a page container or centering each piece of the larger puzzle. Navigation would still require a wrapper so really there is no proper way to do it without adding in some HTML that I know of.