CSS in Website Design - Tips #1  -  December 15, 2006

Seeing as CSS driven design is steadily becoming the most standards-compliant method of design, I thought I would write a few articles detailing tips, tricks and general good practice in CSS. To start with, I’ve written a basic guide to some layout issues.

Centering a Web Page with CSS
In terms of the CSS knowledge required, centering a web page is very easy to do. However, it can be easy to inadvertently do it in a way that is incompatible with some browsers, causing rendering problems.

Firstly you need to “wrap” all your content in a grouping tag such as a “div”, placed just inside the body tag, and set a width on it in the CSS:

#wrapper{
width:800px;
}

The normal way of now centering the page is to set the margins on the #wrapper div to “auto” for the sides (and whatever you want for the top and bottom. I’m setting them to 0):

#wrapper{
width:800px;
margin:0 auto;
}

Now this is fine in all popular browsers, but unfortunately older browsers such as IE5 don’t recognise the “auto” value. To get around this and assure complete compatibility, IE5 has a slight quirk in that you can add the text-align attribute to the “body” selector in the CSS and it will align nested tags as specified. However, centering the wrapper in this way will also centre all text within the wrapper (in all browsers). To get round this we align the text within the wrapper back to the left.

So the finished CSS would be:

body{
text-align:center;
}
#wrapper{
width:800px;
margin:0 auto;
text-align:left;
}

Rik Weber
Web Developer

rikweb at 3:29 pm

No Comments

No comments yet.

Leave a comment