Some useful CSS Layout Tips

The most difficult thing in CSS to get right is the layout of your site. Here are a couple of tips dealing just with that.

Tip 1 : Clear out the default padding and margin settings before you start working. Different browsers have different default margins so you want to start with a clean slate, so to speak. Use this command:
*
{
margin: 0;
padding: 0;
border: 0;
}
to clear all margins. Also note the border, which is set to 0. Please note that if you do this, you will also get rid of the pesky purple border round clickable images, although some people argue that the purple border is neccessary for accessibility and usability. But lots of people do not like the purple border round images, and this is one way that you can get rid of it in one fell swoop.

Tip 2 : To center your layout, use a container div to contain all your content. Declare it as follows:
#container
{
margin: 0 auto;
width: xyzpx;
}
There are a couple of points here to take note of. DO NOT declare the width to be 100%. This defeats the whole object since you will just have to declare the sub elements within the container and then center THEM using margin : 0 auto. This is VERY BAD since it means that instead of declaring the central layout once, you will have to declare it in multiple places

Read More Article...