Horizontal spacing

Dev Shed Forums Sponsor:

November 12th, 2012, 12:48 PM

frameexpert

Registered User

Join Date: Nov 2012

Posts: 2

Time spent in forums: 27 m 34 sec
Reputation Power: 0

Horizontal spacing

Hi,

I have a tight set of paragraphs like this:

PASSED: 18,230
LEFT: 7,300
CHRISTMASES: 20

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 elements like in my example. Thanks in advance.

Rick

November 12th, 2012, 10:08 PM

frameexpert

Registered User

Join Date: Nov 2012

Posts: 2

Time spent in forums: 27 m 34 sec
Reputation 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.

November 13th, 2012, 02:14 AM

simplypixie

Contributing User

Join Date: Aug 2012

Posts: 104

Time spent in forums: 18 h 33 m 57 sec
Reputation Power: 11

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

Horizontal spacing

Developer Shed Advertisers and Affiliates