Need help centering DIV in CSS

appstate98 · August 22nd, 2009, 03:43 PM

Hi- I had a "coming to jesus" last night regarding my website. I've been out of the professional web design world for about 7 years. I'm getting back in it. I used to design in tables and after some reading, I know I need to design in DIV. My problem is I do not know how to get my main section centered on the page.

I did a sketch up of what I want in layout terms. Any suggestions on how to center a 980px div?

Here's a link to my current page with table layout.
http://www.prodentite.com/patient_edu/index.htm
http://www.prodentite.com/images/page_layout.png

Any help is appreciated.

mallsop · August 28th, 2009, 01:14 PM

Probably something like this. See the float center section:
http://www.wipeout44.com/brain_food/...ing_afloat.asp

chroniclemaster1 · September 12th, 2009, 02:44 AM

Centering can sometimes be problematic. Create your container div with an id="container" or whatever.

#container {
margin-left: auto;
margin-right: auto;
}

Theorhetically, there's no reason you shouldn't be able to use shorthand rules to condense this, but I've had awful luck actually implementing it for centering. Every once in awhile I just can't get it to work and resort to the inappropriate {text-align: center;} to center a div. Obviously it's only supposed to be for text. It's several years old, but I still recommend Dave Shea's The Zen of CSS Design, as the best collection of best practices for CSS design.

richard.york · September 12th, 2009, 11:54 AM

Centering blocks is covered in my book in Chapter 7, page 220. You can center a block by applying the declaration margin: auto; in a CSS rule referencing the item you want to center. Also covered in that chapter, page 222, is how to center blocks in IE in quirksmode using text-align: center;.

HTH!