Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
 
 
Thread Tools Display Modes
  #1 (permalink)  
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.
http://www.prodentite.com/patient_edu/index.htm
http://www.prodentite.com/images/page_layout.png

Any help is appreciated.
  #2 (permalink)  
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:
http://www.wipeout44.com/brain_food/...ing_afloat.asp
  #3 (permalink)  
Old September 12th, 2009, 02:44 AM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

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.
  #4 (permalink)  
Old September 12th, 2009, 11:54 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

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!
 


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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 08:22 AM
Not centering tul CSS Cascading Style Sheets 3 September 22nd, 2005 12:16 PM



All times are GMT -4. The time now is 01:58 AM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.