homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Center Div Tags
How to?
wfernley




msg:3272849
 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




msg:3272868
 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




msg:3272880
 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




msg:3273883
 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




msg:3273885
 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




msg:3273889
 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




msg:3273941
 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




msg:3273967
 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




msg:3274602
 11:37 pm on Mar 7, 2007 (gmt 0)

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

Robin_reala




msg:3274635
 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




msg:3275245
 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