specific text spacing without tables

Question

I am trying to find a way to line up specific text on the right side of a div, while the rest of the text stays on the left.

I would like it to be better formatted so that the prices line up on the right, and not bunched up on the other text.

Is there a way to do this without tables? I have 3 divs containing similar information that are all floated left next to each other. I have looked for text spacing, line spacing and text formatting and couldn't find anything specifically for this issue.

Thanks for your help

Answer 1

Styled unordered lists and labels make good companions. You can adjust the margins on the list items to control the spacing if you want as well.

<div class="prices">
    <h2>Rates</h2>
<ul>
    <li>
        <label>Day Pass:</label> $20
    </li>
    <li>
        <label>Month Pass:</label> $20
    </li>
    <li>
        <h3>Personal Training</h3>
    </li>
        <li>
        <label>Something:</label> $20
    </li>
    <li>
        <label>Something else:</label> $20
    </li>
</ul>
</div>

CSS:

.prices h2 {
    text-align:center 
}

.prices ul, .prices li {
   list-style:none;
   margin:0;
   padding:0    
}

.prices label {
   display:block;
   float:left;     
   margin-left:120px;
   margin-right:10px; 
}

.prices h3 {
    margin-left:100px;   
}