CODEWITHSUNDEEP
htmlcss
fello
fello

Reputation: 339

Need help aligning a text

      Age: 23
   Location: Bronx,NY
Nationality: Puerto Rican
  Ocupation: Tailor

You can see a live example Here

Upvotes: 3

Views: 72

Answers (6)

pixelbobby
pixelbobby

Reputation: 4440

I updated it for you here: http://jsfiddle.net/MUFcb/11/

Added <span> with CSS to give the alignment you were looking for in your example.

Here's the code:

HTML

<div id="personal">
   <ul>
       <li><span class="label">Age:</span> 23</li>
       <li><span class="label">Location:</span> Bronx,NY</li>
       <li><span class="label">Nationality:</span> Puerto Rican</li>
       <li><span class="label">Ocupation:</span> Tailor</li>
   </ul>
</div>

CSS

#personal ul li span.label{
    display: block;
    float: left;
    width: 75px;
    text-align: right;
    padding-right: 10px;
}

Upvotes: 1

clairesuzy
clairesuzy

Reputation: 27624

I think I'd use a dl (Definition list) here as you are defining a term - dt, then giving 'description' - dd, on each term.. the good thing is you get the two parts you need to align however you'd like ;)

Definition Lists:

Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.

then you can float the dt 's

CSS:

dl {border: 1px solid #000;}
dt {float: left; width: 180px; text-align: right; margin-right: 20px;}

HTML:

<div id="personal">
    <dl>
       <dt>Age:</dt> <dd>23</dd>
       <dt>Location:</dt> <dd>Bronx,NY</dd>
       <dt>Nationality:</dt><dd>Puerto Rican</dd>
       <dt>Ocupation:</dt><dd>Tailor</dd>
    </dl>
</div>

Example: HERE

Upvotes: 3

Josh Mein
Josh Mein

Reputation: 28645

If you dont want to use a table you can also use divs that have a style of float:left

<div style="float:left;">
       Age: <br />
       Location: <br />
       Nationality: <br />
       Ocupation: <br />
    </div>
    <div style="float:left;">
       23<br/>
       Bronx,NY<br/>
       Puerto Rican<br/>
       Tailor<br/>
    </div>

If you want the age to be right-aligned, you can add text-align:right to that div.

Upvotes: 0

Tomasz Golinski
Tomasz Golinski

Reputation: 728

what about this one ? if you want the spaces less then just change the padding value http://jsfiddle.net/MUFcb/8/

Upvotes: 0

novacara
novacara

Reputation: 2257

You would probably want to use a table for that sort of data, not an unordered list...

<table>
   <tr>
      <td>Age:</td>
      <td>23</td>
   </tr>
   ...
   ...
</table>

Upvotes: 1

Nick Brunt
Nick Brunt

Reputation: 10057

You probably want to use a table here.

  <table>
    <tr>
      <td>Age:</td>
      <td>23</td>
    </tr>
    <tr>
      <td>Location:</td>
      <td>Bronx,NY</td>
    </tr>
    <tr>
      <td>Nationality:</td>
      <td>Puerto Rican</td>
    </tr>
    <tr>
      <td>Ocupation:</td>
      <td>Tailor</td>
    </tr>
  </table>

Upvotes: 0

Related Questions