Welcome to WebmasterWorld Guest from 54.159.50.111

Forum Moderators: not2easy

Message Too Old, No Replies

Center Div Tags

How to?

     
6:10 pm on Mar 6, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2003
posts:664
votes: 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

6:29 pm on Mar 6, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4966
votes: 10


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.

6:38 pm on Mar 6, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2003
posts: 664
votes: 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!

1:39 pm on Mar 7, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Mar 14, 2003
posts:508
votes: 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.

1:42 pm on Mar 7, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 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.
1:49 pm on Mar 7, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2003
posts:664
votes: 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;
}

2:40 pm on Mar 7, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 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)

2:46 pm on Mar 7, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2003
posts:664
votes: 0


Really? The site displays fine in IE and FireFox. Would it be best to specify em's?
11:37 pm on Mar 7, 2007 (gmt 0)

Full Member

5+ Year Member

joined:Jan 17, 2007
posts:306
votes: 0


em's are more of a headache than a benefit. Use percentages.
11:58 pm on Mar 7, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 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.
1:58 pm on Mar 8, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2003
posts: 664
votes: 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! :)