CODEWITHSUNDEEP
css
Micah
Micah

Reputation: 116240

CSS layout help - Multiline address

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?

Upvotes: 7

Views: 7498

Answers (4)

felix wangari
felix wangari

Reputation: 1

In this case, practically, .address does not change the layout of the html code but the pre element can assist. for instance

address
{
    white-space:pre;
    text-align: left;
}

Upvotes: 0

nicruo
nicruo

Reputation: 516

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;
}

Upvotes: -1

Rowland Shaw
Rowland Shaw

Reputation: 38128

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>

Upvotes: 2

Sulaiman
Sulaiman

Reputation: 506

hey try to use this use this 

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

Upvotes: 12

Related Questions