Centering Text in a Nested DIV

[Jonah Bishop]

I have a puzzling problem with centering text, and I'm hoping that someone
here can help me out. First of all, let me state that I am using XHTML 1.0
Strict and CSS for all layout purposes (no tables). My website consists of a
few, simple parts: a "container" DIV which is centered and 750 pixels wide,
a "sidebar" DIV which can be found along the left side of the container, and
a "content" DIV which fills up what's left of the right part of the
container. This simple layout in XHTML markup is as follows:

<div id="container">
<div id="sidebar"> (... Some Sidebar Stuff ...) </div>
<div id="content"> (... Some Content ...) </div>
</div>

The corresponding, simple CSS that goes with this is as follows:

#container {
margin: 0 auto;
padding: 10px;
text-align: left;
width: 730px;
}
#sidebar {
float: left;
margin: 0;
padding: 10px;
text-align: center;
width: 125px;
}
#content {
width: 560px;
margin-left: 155px;
padding: 5px;
}

Here is the problem: if I place a paragraph tag within the "content" DIV,
and give it a class name of "center" (this class consists of one rule only:
text-align:center; ), the text is not centered as I would like it to be.
Rather, it is left justified. What's going on here? Does this have something
to do with the nesting of the DIV elements?

If I change the "center" class to the following code, the text is aligned
properly:

#content p.center { text-align: center; }

I don't have a problem with changing the code, but I don't understand why
the previous "center" class (without the #content and p selectors) doesn't
work. Can anyone shed some light on why this might work the way it does? I
would greatly appreciate any wisdom on the subject.

Thanks,
Jonah B.

[Jonah Bishop]

I am so foolish. In posting these now three times, I realized what the
problem is. One rule I forgot to mention in both of my previous posts was
the following:

#content p { text-align: justify; }

Since this rule binds more tightly than just the "center" class, it
obviously takes precedence. This was an example of poor markup and style
sheet authoring, as I thought it might be.

Can anyone explain to me, then, exactly how precedence works in CSS? Why
wouldn't a class override the rule mentioned above?

Jonah B.

"Jonah Bishop" <jg****@yahoo.com> wrote in message
news:qq******************@twister.southeast.rr.com ...

I have a puzzling problem with centering text, and I'm hoping that someone
here can help me out. First of all, let me state that I am using XHTML 1.0
Strict and CSS for all layout purposes (no tables). My website consists of a few, simple parts: a "container" DIV which is centered and 750 pixels wide, a "sidebar" DIV which can be found along the left side of the container, and a "content" DIV which fills up what's left of the right part of the
container. This simple layout in XHTML markup is as follows:

<div id="container">
<div id="sidebar"> (... Some Sidebar Stuff ...) </div>
<div id="content"> (... Some Content ...) </div>
</div>

The corresponding, simple CSS that goes with this is as follows:

#container {
margin: 0 auto;
padding: 10px;
text-align: left;
width: 730px;
}
#sidebar {
float: left;
margin: 0;
padding: 10px;
text-align: center;
width: 125px;
}
#content {
width: 560px;
margin-left: 155px;
padding: 5px;
}

Here is the problem: if I place a paragraph tag within the "content" DIV,
and give it a class name of "center" (this class consists of one rule only: text-align:center; ), the text is not centered as I would like it to be.
Rather, it is left justified. What's going on here? Does this have something to do with the nesting of the DIV elements?

If I change the "center" class to the following code, the text is aligned
properly:

#content p.center { text-align: center; }

I don't have a problem with changing the code, but I don't understand why
the previous "center" class (without the #content and p selectors) doesn't
work. Can anyone shed some light on why this might work the way it does? I
would greatly appreciate any wisdom on the subject.

Thanks,
Jonah B.

[Jonah Bishop]

I forgot to mention that my CSS also has the following rule in it:

body { text-align: center; }

This is in place to fool IE into centering the "container" DIV (since IE
wrongly uses that tag for such purposes).

Jonah B.

"Jonah Bishop" <jg****@yahoo.com> wrote in message
news:qq******************@twister.southeast.rr.com ...

I have a puzzling problem with centering text, and I'm hoping that someone
here can help me out. First of all, let me state that I am using XHTML 1.0
Strict and CSS for all layout purposes (no tables). My website consists of a few, simple parts: a "container" DIV which is centered and 750 pixels wide, a "sidebar" DIV which can be found along the left side of the container, and a "content" DIV which fills up what's left of the right part of the
container. This simple layout in XHTML markup is as follows:

<div id="container">
<div id="sidebar"> (... Some Sidebar Stuff ...) </div>
<div id="content"> (... Some Content ...) </div>
</div>

The corresponding, simple CSS that goes with this is as follows:

#container {
margin: 0 auto;
padding: 10px;
text-align: left;
width: 730px;
}
#sidebar {
float: left;
margin: 0;
padding: 10px;
text-align: center;
width: 125px;
}
#content {
width: 560px;
margin-left: 155px;
padding: 5px;
}

Here is the problem: if I place a paragraph tag within the "content" DIV,
and give it a class name of "center" (this class consists of one rule only: text-align:center; ), the text is not centered as I would like it to be.
Rather, it is left justified. What's going on here? Does this have something to do with the nesting of the DIV elements?

If I change the "center" class to the following code, the text is aligned
properly:

#content p.center { text-align: center; }

I don't have a problem with changing the code, but I don't understand why
the previous "center" class (without the #content and p selectors) doesn't
work. Can anyone shed some light on why this might work the way it does? I
would greatly appreciate any wisdom on the subject.

Thanks,
Jonah B.

[Chris Beall]

"Jonah Bishop" <jg****@yahoo.com> wrote in message
news:AJ*******************@twister.southeast.rr.co m...

I am so foolish. In posting these now three times, I realized what the
problem is. One rule I forgot to mention in both of my previous posts was the following:

#content p { text-align: justify; }

Since this rule binds more tightly than just the "center" class, it
obviously takes precedence. This was an example of poor markup and style sheet authoring, as I thought it might be.

Can anyone explain to me, then, exactly how precedence works in CSS? Why wouldn't a class override the rule mentioned above?

Jonah,

What you want to read is
http://www.w3.org/TR/REC-CSS2/cascade.html#cascade, especially the part
on selector precedence at
http://www.w3.org/TR/REC-CSS2/cascade.html#specificity.

I agree with Stan about specifying width of a text area in pixels. I
would use percent, which allows the size to grow or shrink as the user
resizes the window or changes screen resolutions. To prevent the text
lines from getting uncomfortably short or long, use max-width and
min-width, both of which should be specified in em units. [True, some
browsers don't honor these parameters, but at least you can say you
tried...] The latter is important because "studies show" that lines
longer than a certain number of characters become difficult to read
(your eye wanders up or down as it tries to traverse the line).

For the same reason, justified text is frowned upon by many folks.
Left-aligned text leaves a ragged right margin. When you combine this
with a reasonable length line, the irregularity of the right margin
gives the eye something to use as a vertical reference point, to keep it
scanning across the current line. When all lines end at the same point
(especially if they are very long), the general field of view is just a
grey rectangle with no distinguishing marks and your eye will drift
upward or downward from the line you are scanning.

Fonts, colors, and line-spacing also impact readability.

Chris Beall