Css layout help - Multiline address

Question

I'm trying to display an address right aligned in the footer of my page like this:

    1234 south east Main St.
          Nowhere, ID 45445
             (555) 555-5555

in my markup I have this:

   <address>
      1234 south east Main St.
      Nowhere, Id 45445
      (555) 555-5555
   </address>

How can I get this to layout properly without inserting <br /> in each line using css?

Answer 1

hey try to use this use this

.address
{
white-space:pre;
text-align:right;
}

Answer 2

You're going to have to add extra elements in there, either <br> as you suggest, or else something like:

   <address>
      <div class="street">1234 south east Main St.</div>
      <div class="state">Nowhere, Id 45445</div>
      <div class="telnum">(555) 555-5555</div>
   </address>

Answer 3

First it's a good practice in this case to give an id to the address. Of course if you don't use another address again, it's not necessary. Then:

address#company_address
{
  white-space: pre;
  text-align: right;
}