Welcome to WebmasterWorld Guest from 54.147.250.33

Forum Moderators: not2easy

Center Div Tags

How to?

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

WebmasterWorld Senior Member 10+ Year Member



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)

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



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)

WebmasterWorld Senior Member 10+ Year Member



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)

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

5+ Year Member



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

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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! :)

 

Featured Threads

Hot Threads This Week

Hot Threads This Month