Just another pressurer blogger …

06

Aug

2009

Auto-width Margins for centering

Ok. For years I’ve used div align=”center” to horizontally center one container within another container. I know it’s on the “depreciated” list, but all the browsers still respect it – and it’s just always how I’ve done things. However, I was working in a friends CMS (un-named), and realized that it was changing my code to¬† div style=”text-align:center” which I KNOW is not the correct way to do things (even though I have used it in the past with some success centering block-level elements). Like you know, there are usually 100 different ways to skin any cat (sorry cats) and depending on what day of the week it is, I will use different methods. However, I needed to find something to add to my “only way I will center from now on” list.

So after digging around and testing in as many browsers (mac and pc) that I have around, here is the “proper” way to do it today (thanks to bluerobot.com).

Let’s say you have a div id=”container” where the width is 100%, and you want div id=”content” that’s 500px wide horizontally centered in it?

Set the margin style for the #content div to be: margin:0px auto.

Now even though IE5/Win does not respect this (almost wanting to say “WHO CARES”),
there is a very simple work around. See: http://www.bluerobot.com/web/css/center1.html

Enjoy.

Tags: ,

Leave a Reply