Skip navigation
Yensen
Currently Being Moderated

Lining up bold and non bold text in two columns

Feb 23, 2012 4:26 AM

Hi.

 

I am trying to put a price list on my website and I want the prices in bold but not the products.

 

I understand that I have to have the two lists separate so I can give them different formatting. So, I made two div containers products and prices and made the lists in there.

However, I'm really struggling to get the product text to line up with the price. Obviously the bold font is bigger so the prices list is longer and making a table doesn't help as the same thing happens.

I have been looking at another site that has this layout. It appears to use unordered lists (ul.item and ul.cost) that somehow have a width property and show up in the CSS pane. However, there is no height specified so not only can I not figure out to construct a ul with properties, I wouldn't know how to solve the lining up issue anyway. I think tags may be the key to this but I was tired last night and gave up.

 

I am very new to all this and work pretty much solely in design view. The rest of my site is pretty much sorted but I have stumbled at this hurdle. I don't want to spend all evening trying to figure this out again so I'd really appreciate some assistance.

 

An explanation of theory as opposed to code listings would be much easier for me to understand.

 

Thanks very much for your help.

 
Replies
  • Currently Being Moderated
    Feb 23, 2012 11:36 AM   in reply to Yensen

    When you need a table, use a table. 

     

    CSS:

     

    td:nth-child(2) {

         font-weight:bold;

         text-align:right;

    }

     

    HTML:

     

    <table cellspacing="0" cellpadding="5">

    <tr>

    <td>Some text here</td>
    <td>Price</td>
    </tr>

    <tr>

    <td>Some text here</td>
    <td>Price</td>

    </tr>

    <tr>

    <td>Some text here</td>
    <td>Price</td>
    </tr>

    </table>

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points