Proper coding to align a heading tag

[PaulPA]

For some reason I am having problems aligning a heading tag using css. Here is a simple example of the css:

H2 {
text-align : right;
}

But using this has no effect as the text stays left justified. I always thought a text-align would work for a heading. Am I wrong on this?

[bedlam]

Nope, you're not wrong, but something must be wrong if 'text-align' doesn't work in a header element. Have you validated your html [validator.w3.org] and css [jigsaw.w3.org]?

-B

[PaulPA]

Thanks - I'll focus on the page coding. Probably made an error there.

[Rambo Tribble]

The h2 is a block element, the width of which automatically stretches to 100% of the containing element, unless otherwise specified. Usually, that is the body, which usually stretches to the width of the screen. In other words, look for width constraints either previously applied to the h2, or to any containing element.

[bedlam]

Yep. Also, while you're at it, check to see if you've done something like this:

h2 {display:inline;}

-B

[vinzzz]

text-align, as said, only works on the parent element (to align the child) if u want the h2 to be 'aligned' to the right, just use float:right

[Bonusbana]

Exactly vinzzz, text-align is used to align its cilds elements, not the element itself. Thats what float is used for.

[createErrorMsg]

text-align, as said, only works on the parent element (to align the child)

Applying text-align:right to an <hx> tag SHOULD right-align the header text, as long as nothing else is affecting the tag.

The text-align attribute centers children of a block level element, but I believe the text within that element actually counts as a child node of the element itself (in the DOM). Meaning text-align applies to the text in the element, as well as any other inline elements contained in the block.

if u want the h2 to be 'aligned' to the right, just use float:right

Using float to align something to the right will work, but it's a bit of an overkill. In order to avoid other pitfalls that will come along with it, you also have to apply a clear:right to the element following that header. This can completely kill a float-based layout in some browsers, especially if that floated-header-cleared-paragraph chunk is located inside of a floated container.

Of course, if you're layout doesn't use other floats, you'll be fine.

I suspect something else in your CSS is affecting the style of that header tag.

[vinzzz]

hmm i dont totally agree with you...

i now use for some time a floatbased design, 3 columns, header, footer, and i can easily float WITHIN a container... floatclearing SHOULD only happen within the same container... (i believe ie/mac or ie5/win or something doesnt work that way...)
(and then there's the :after css thing, to clear an element (with a little help to fix it for IE)

[createErrorMsg]

and i can easily float WITHIN a container

Of course you're right: you can easily float within a container. The potential problem is CLEARING floats within a container, and the effects it can have on the floated container, itself.

floatclearing SHOULD only happen within the same container

Again, you are right, but there is a marked difference between 'should' and 'does' when dealing with floats. For instance, a child element's clear property is not supposed to apply to the parent element, but there are cases in which just this sort of thing happens (someone wrote a post about a few weeks ago: I'll try to find it). In such a case, using float to right align a header, and the necessary clear applied to the next element, would break apart the layout if the clear applied itself to the floated parent.

Of course this doesn't always happen (it's not supposed to happen at all!), and if I'm remembering correctly it's a browser specific problem (probably IE/Mac).

Anyway PAUL, here's a quote from the w3 specs on text-align [w3.org]:

This property describes how inline content of a block is aligned.

The bold is mine.

Obviously something else in your code is snarling up that <h2>.