The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] A more interesting price display using CSS

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #27376

    Hi all,

    I’m trying to create a more interesting price display using CSS and I need a little help doing it. Anyone feeling helpful? Take the price £2,486.00. I’d like to split the currency symbol from the units (pounds) and the decimals (pence) where the decimals are displays smaller but aligned to the top of the text, almost like a <sup> but without using an actual superscript tag (as it wouldn’t be very semantic).

    So far I’ve managed to split out the price into <spans> (I’d like to to keep it inline):


    .price" wraps the whole thing
    ".currency" wraps the actual currency symbol (it can vary on my site between pounds, euros and we’ve the capability for dollars and yen)
    ".units" are whole pounds, euros, etc
    ".decimals" are anything after – and including – the decimal point (pence, cents, etc)


    Here is an image preview of what I want to achieve

    I’ve tried a few combinations but can never seem to get the whole thing aligned to the top. What would be the best way of aligning it cross-browser.

    Thank you.


    The vertical align property should set you free!

    Check out this quick demo I put together:




    Thanks for that! That helped a lot.

    Developing it further, and using the snippet from, I came up with a good looking price display. I’ve only tested it in firefox so far – so my apologies if it needs tweeking for other browsers.

    And because it’s good to share, the code is:


    Untitled Document

    Pricing Display

    This item costs $5,310.79 Dollars.

    Like the car sir? That’ll be 587,123.87 Euros please.

    Show me the money £12,4680,680.61 Pounds.

    My father died recently and left in his will the sum of ¥6,980,499.00 Yen. Please wire over $5,310.79 to my Nigerian bank account and I will gladly share the fund with you. Classic.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.