Wednesday, 1 August 2007

Centering divs/Centering your page

People often ask questions about centering divs, or how can I center my page?

Well there a fair few centering techniques out there, but heres one I find particularly useful.

It supports skinny web designs, that is sites that don't use the entire screen. Usually, these pages' HTML is set out so that there is a wrapper div (or a containing div) around the rest of the divs and content. This is the div that you need to center.

The way I go about it is to give the wrapper div a percentage value, we'll use 80% in this example. Then, take the remaining percentage (in this case 20%) and half it (10%.... obviously :D). Then give the wrapper div a left-margin of 10% (or whatever number you came up with).

Now the wrapper div will always appear centered, and therefore all of the inner divs will be centered along with it!

2 comments:

CMasterson.com said...

Dear Smartphone,

Such a smart and clever post. Almost likable. Such smart and clever smileys.

Andrew McConville said...

This only centers the div horizontally, not vertically!