SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Wildomar, CA
    0 Post(s)
    0 Thread(s)

    Challenging Text Layout

    Ok, I am working on trying to layout a pricing plan for this website. Currently, when putting the information on a Word Document we had it laid out as follows:

    Luxury Session Plan
    Let us help you turn your baby’s photos into keepsakes to last a lifetime.
    (I took out the rest of the text to save space)
    Invitation to our monthly scrapbooking class. . . . . . . . . . . . . . . . . $259
    (We don't have to have the dots all the way across, but I need the actual prices to all align up exactly the same from the right margin)

    Prestige Session Plan 18-26 weeks and 27-34 weeks
    2 5x7s of your favorite 3D color photo
    6 4x6s of up to 6 different 3D color photos. . . . . . . . . . . . . . . . . . .$299

    This is the CSS I was assuming I could do, but it hasn't seemed to work:

    .sessions{ margin-right:5px; text-align:right; font-size:11px; font-weight:500; padding-left:105px;}

    And then my html code for the above would look something like this:

    <strong>Luxury Session Plan</strong> <br>
    Let us help you turn your baby&rsquo;s photos into keepsakes to last a lifetime.<br>
    <span class="sessions">$259</span> </p>

    Does this make sense to anyone?

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    0 Post(s)
    0 Thread(s)
    One way to get those prices to line up nicely would be to use a table. Its probably your best bet. Have the items description in one td and the price in the next td.

    Also you should use some p tags instead of the markup you have could get rid of the br /> tags....

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    If you just want them aligned to the right without actually being in columns you could just float them right.


    Here is an example that was to show how to do dotted leaders but aligns some text left and right.

    Or a more simpler demo:
    Hope that's of some use


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts