homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

text-align:right used in a class doesn't work
Works elsewhere in the document, however

5+ Year Member

Msg#: 4312819 posted 11:08 pm on May 15, 2011 (gmt 0)

So in a nutshell, inside the main body element is a footer section, and at the end of the footer section is a copyright line, where I've formatted it with a class.

<div id="Footer"> <!-- Footer area -->
Contact information - lorem ipsum dolor sit amet?<br />
<span class="italic">Available 9AM-5PM, Mon-Fri.</span><br /><br />
Phone:[012]-345-6789 or [555]-555-5555<br />
Email:address [at] domain.com<br />
You can also use <a href="http://www.example.com">our online form</a> to send us an email.<br />
<span class="copyright">&copy; Copyright 20XX-20XX YourCompanyNameHere</span>
</div> <!-- End footer area -->

The CSS:
.copyright /* Copyright line in footer */

Everything works fine except for the copyright class, however; it doesn't align to the right. Adding the class anywhere else in the HTML document doesn't work either; however, adding text-align:right to another section in the CSS file works (e.g. adding it to body makes the entire document align to the right, adding it to #Footer makes the entire footer align to the right, etc).

I've tried aligning other parts of the document to the right, and it always works, except for that section. I've tried removing the copyright symbol, clearing everything but the copyright line out of the footer section, clearing the CSS file of everything but the copyright class... argh, I know it's a dumb mistake I've made somewhere. Any pointers?

The doctype is XHTML 1.0 transitional.



WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4312819 posted 11:33 pm on May 15, 2011 (gmt 0)

You're setting a block-level property (text-align) on an inline element (a span). Depending on browser it may or may not work. In the worst case-- I've seen this-- the property you set for the span will bleed back to its containing block, making everything right-aligned.

Instead of <br /> followed by a span, why don't you simply make a new paragraph? Seems by far the easiest approach. If you don't want the extra vertical space, say

.footer p {margin-top: 0;}

or, for that matter,

.footer p {text-align: right; margin-top: 0;}

since there's only the one.


WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4312819 posted 4:20 pm on May 16, 2011 (gmt 0)

To fortify that - <br> (or <br/> ) is only a visual "effect," by using semantic elements you give your content meaning to devices reading them - like search engines. Empty elements like <div>, <br> <span> have no semantic meaning. Each of those lines can be paragraphs.


5+ Year Member

Msg#: 4312819 posted 7:50 pm on May 16, 2011 (gmt 0)

Thank you very much lucy24, that has set me on the right path!

For those curious, here's the final CSS:
#Footer p /* Copyright line in footer */



WebmasterWorld Senior Member 5+ Year Member

Msg#: 4312819 posted 8:51 pm on May 16, 2011 (gmt 0)

Hi Entity :),

Good to see you finally stopped "lurking" - and welcome to css. Thanks for posting back the solution you created!

As you've just begun exploring html/css, you might want to look at the address [w3.org] element as part of rocknbil's suggestion to use elements with semantic meaning. An understanding of display [w3.org] is always helpful too.

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