Sean O Sears » css http://www.seanosears.com/blog Just another pressurer blogger ... Tue, 25 Aug 2009 17:49:40 +0000 http://wordpress.org/?v=2.8.1 en hourly 1 Auto-width Margins for centering http://www.seanosears.com/blog/2009/auto-width-margins-for-centering/ http://www.seanosears.com/blog/2009/auto-width-margins-for-centering/#comments Thu, 06 Aug 2009 16:24:08 +0000 admin http://www.seanosears.com/blog/?p=14 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.

]]> http://www.seanosears.com/blog/2009/auto-width-margins-for-centering/feed/ 0