#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0

    Horizontal spacing


    Hi,

    I have a tight set of paragraphs like this:

    <p>PASSED: 18,230</p>
    <p>LEFT: 7,300</p>
    <p>CHRISTMASES: 20</p>

    I need to left-align the "labels" and right-align the numbers. The horizontal layout is tight:

    Code:
    PASSED:  18,200
    LEFT:     7,300
    CHRISTMASES: 20
    which means that the long label will encroach on the numbers above. I don't know if a table will allow this. Any suggestions on how to do this with CSS would be appreciated.

    Note that I can structure the HTML any way I want, so I don't need to use <p> elements like in my example. Thanks in advance.

    Rick
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0
    Here is what I have so far:

    Code:
    <html>
      <head>
        <title>Number Our Days</title>
        <link rel="stylesheet" type="text/css" href="test.css" />
      </head>
      <body>
        <h1>Number Our Days</h1>
        <p class="label">PASSED:</p>
        <p class="number">18,200</p>
        <p class="label">LEFT:</p>
        <p class="number">7,300</p>
        <p class="label">CHRISTMASES:</p>
        <p class="number">20</p>
      </body>
    </html>
    Code:
    * {
        margin:0; padding: 0;
    }
    
    body {
        width: 130px;
        font-family:  Calibri;
        overflow: hidden;
    }
    
    p {
        padding-left: 4px;
        padding-right: 4px;
        padding-top: 2px;
        padding-bottom: 2px;
        width: 122px;
    }
    
    p.label {
        font-size:  12px;
        text-align: left;
    
    }
    
    p.number {
        font-size: 22px;
        text-align: right;
        margin-top: -26px;
    }
    
    h1 {
        width: 122px;
        font-weight: bold;
        color: Navy;
        font-size: 14px;
        text-align: center;
        padding: 4px;
    }
    This actually works pretty well. This is going to be for a Windows gadget, so it needs to be pretty tight. Any other suggestions are welcome. Thank you very much.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    By using floats and widths:

    Code:
    <html>
      <head>
        <title>Number Our Days</title>
        <link rel="stylesheet" type="text/css" href="test.css" />
      </head>
      <body>
        <h1>Number Our Days</h1>
        <p><span class="label">PASSED:</span>18,200</p>
        <p><span class="label">LEFT:</span>7,300</p>
        <p><span class="label">CHRISTMASES:</span>20</p>
      </body>
    </html>
    In your CSS
    Code:
    .label {
      float: left;
      width: 140px;
    }
    You will need to adjust the width to suit your needs

IMN logo majestic logo threadwatch logo seochat tools logo