Wrox Programmer Forums
BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0
This is the forum to discuss the Wrox book Beginning CSS: Cascading Style Sheets for Web Design, 2nd Edition by Richard York; ISBN: 9780470096970
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0 section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
Old August 22nd, 2009, 03:43 PM
Registered User
Join Date: Aug 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default Need help centering DIV in CSS

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.

Any help is appreciated.
Old August 28th, 2009, 01:14 PM
Authorized User
Join Date: Mar 2009
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Default float center

Probably something like this. See the float center section:
Old September 12th, 2009, 02:44 AM
Friend of Wrox
Join Date: Jun 2007
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts

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.

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Old September 12th, 2009, 11:54 AM
richard.york's Avatar
Wrox Author
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts

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;.


Similar Threads
Thread Thread Starter Forum Replies Last Post
Centering an UL element within DIV keithc BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 2 April 4th, 2013 04:13 PM
Position Div with CSS sandeepbhutani304 ASP.NET 2.0 Basics 0 September 19th, 2008 02:17 AM
CSS 100% Height DIV Problem kwilliams CSS Cascading Style Sheets 2 August 22nd, 2007 09:55 PM
Centering a box Terry Joseph Migliorino CSS Cascading Style Sheets 3 December 28th, 2005 09:22 AM
Not centering tul CSS Cascading Style Sheets 3 September 22nd, 2005 12:16 PM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.