Why will my text not align right?

Question

I have some text in two parts, a title and a value (which will be updated via javascript if I ever get that far!) such as Temp Max and 20.0 and there are four lines of this one above the other, I would like all the numbers to line up vertically, easy I thought but I just cant get it to work.

I have tried text-align, align:right both in the html and in css plus much more.

What am I doing wrong? (I feel this is going to be a silly mistake so apologies in advance!)

HTML:

<div class="ex2">
<div class="ex4">
<h2>Temp Max</h2> <h3><span id="maxTemp1"; align="right">0.00</span></h3><br>
<h2>Temp Min</h2> <h3><span id="maxTemp2"; align="right">0.00</span></h3><br>
<h2>Hum Max</h2> <h3><span id="maxTemp3"; align="right">0.00</span></h3><br>
<h2>Hum Min</h2> <h3><span id="maxTemp3"; align="right">0.00</span></h3><br>
</div>
</div>

CSS:

h2  { font: bold 1.4em "Trebuchet MS", Helvetica, Sans-Serif; display:inline}
h3  { font: bold 1.4em "Trebuchet MS", Helvetica, Sans-Serif; display:inline; color:#366}


.ex2
{
width:320px;
height:120px;
padding-top:2px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border:1px;
border-color:#FF4C4C;
border-style:dashed;
margin:2px;
overflow: hidden;
float: left;
}

.ex4
{
border:1px;
border-style:dashed;
border-color:#FF4C4C;
width:200px;
height:110px;
float: right;
display:inline;
}

jsfiddle

Answer 1

You had invalid HTML

<div class="ex2">
  <div class="ex4">
    <h2>Temp Max</h2> <h3><span id="maxTemp1">0.00</span></h3><br>
    <h2>Temp Min</h2> <h3><span id="maxTemp2">0.00</span></h3><br>
    <h2>Hum Max</h2> <h3><span id="maxTemp3">0.00</span></h3><br>
    <h2>Hum Min</h2> <h3><span id="maxTemp3">0.00</span></h3><br>
  </div>
</div>

and about text align just add text-align: right; to .ex4

.ex4 {
 border:1px;
 border-style:dashed;
 border-color:#FF4C4C;
 text-align: right;
 width:200px;
 height:110px;
 float: right;
 display:inline;
}

Answer 2

The align attribute is deprecated (so shouldn't be used any more) and never applied to span elements in the first place.

The text-align CSS property will centre the inline content of the block element to which it is applied (so you need to apply it to the h3 and not the span).

---

NB: your temperatures are not headings, so they shouldn't be marked up as h3. A div would be more appropriate.

---

For that matter, your data might be better marked up as:

<table>
    <tr>
        <th scope="row" rowspan="2"><abbr title="Temperature">Temp</abbr></th>
        <th scope="row"><abbr title="Maximum">Max</abbr></th>
        <td>0.00</td>
    </tr>
    <tr>
        <th scope="row"><abbr title="Minimum">Min</abbr></th>
        <td>0.00</td>
    </tr>
    <tr>
        <th scope="row" rowspan="2"><abbr title="Humidity">Hum</abbr></th>
        <th scope="row"><abbr title="Maximum">Max</abbr></th>
        <td>0.00</td>
    </tr>
    <tr>
        <th scope="row"><abbr title="Minimum">Min</abbr></th>
        <td>0.00</td>
    </tr>
</table>

Answer 3

It should work if you style .ex4 with text-align: right.

http://jsfiddle.net/2S39K/