homepage Welcome to WebmasterWorld Guest from 54.226.192.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Center Div Tags
How to?
wfernley

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3272847 posted 6:10 pm on Mar 6, 2007 (gmt 0)

Hey everyone,

I have my content in div tags. Each div has a width of 800px. I need to center each div in the page. How is this possible? Whenever I add text-align: center; to the CSS body it just centers the text in the divs and not the actual divs themselves.

Does anyone know a work around for this?

Thanks in advance for your help!

Wes

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3272847 posted 6:29 pm on Mar 6, 2007 (gmt 0)

This is quite easy to do. First, create your HTML:

<body>
<div id="container">
...
</div>
</body>

In this example, the div with the id of "container" is what we want to make centered and fixed width. Now for the CSS:


body
{
margin: 0;
padding: 0;
text-align: center;
}
#container
{
margin: 0 auto;
width: 770px;
border: 1px solid red;
}

You could omit the margin and border on the body element if you wanted. Also, the border on the container is just to show where it is in this example. You would probably want to add text-align: left; to your container rules.

wfernley

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3272847 posted 6:38 pm on Mar 6, 2007 (gmt 0)

Thank you for your post. I'm actually using classes in my divs - <div class="content_box">

Should I be using ids?

Thanks again!

steve

10+ Year Member



 
Msg#: 3272847 posted 1:39 pm on Mar 7, 2007 (gmt 0)

ID's are used where there will only be one instance on a page, for example a div called content.

Classes are used when there will more than one instance, for example <strong> tags which you might want to apply to more than one piece of text.

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3272847 posted 1:42 pm on Mar 7, 2007 (gmt 0)

It's worth pointing out that you only have to use text-align:center if you still have to cater for IE5 - it's not required by the standards.

wfernley

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3272847 posted 1:49 pm on Mar 7, 2007 (gmt 0)

That makes sense. Well the main div's in my site which I am talking about here will only be used once.

It is fine to declare a style within a container for h1 tags and such right? For example, I am styling h2 tags in my right bar -

#right_bar h2 {
margin: 0px;
font-size: 11px;
}

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3272847 posted 2:40 pm on Mar 7, 2007 (gmt 0)

That's a good example of where you'd use an id, yes.

(on a side note, IE won't resize fonts if you specify the size in pixels)

wfernley

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3272847 posted 2:46 pm on Mar 7, 2007 (gmt 0)

Really? The site displays fine in IE and FireFox. Would it be best to specify em's?

sgietz

5+ Year Member



 
Msg#: 3272847 posted 11:37 pm on Mar 7, 2007 (gmt 0)

em's are more of a headache than a benefit. Use percentages.

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3272847 posted 11:58 pm on Mar 7, 2007 (gmt 0)

For many users the font size you specify will be too small for them to read properly. Web browsers in general allow the user to resize to fonts to fit their particular needs. An unfortunate design decision on the part of the IE team though means that if you specify a font size in pixels users wonít be able to resize it if they adjust the text size. Therefore itís best to use ems or (as sgietz mentions) percentages to specify font sizes.

wfernley

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3272847 posted 1:58 pm on Mar 8, 2007 (gmt 0)

Well I switched all my sizes to em's. How are em's a headache? I can easily switch them to percentages.

Thanks again for your help! :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved