Align two spans inside a td - One left and one right

Question

I have a table. Inside the td's I have two span tags - the one span tag i want to align left, and the other right, but the td does not allow that:

<table>
  <tr>
    <td colspan="5"><span>$</span><span>1000</span></td>
  </tr>
</table>

So I want the $ to be aligned to the far left of the td and the 1000 to align to the far right of the td.

Is that possible?

Answer 1

You can use the following selector, without using extra classes:

td span:last-child{ /*not compatible with <=IE8*/
    color:green;
    float:right;
}

Demo: http://jsfiddle.net/QR3kP/1/

---

For compatibility with IE7 and up use the CSS code below:

td span{
    float:right;
}
td span:first-child{ /* compatible to >=IE7 */
    float:left;
}

Demo: http://jsfiddle.net/QR3kP/4/

---

Another approach is to right align the text inside the <td> and float only the first <span>:

td {
    text-align:right
}
td span:first-child {
    float:left;
}

Demo: http://jsfiddle.net/QR3kP/29/

---

You can use a similar method with the above by using even less css declarations:

td span:first-child + span {
    float:right;
}

In the example above, the default td text align is left and you only select the sibling which is immediately preceded after the first span. Then you just float it to the right. Of course, you may use the ~ selector, which is the same thing in this case.

Demo: http://jsfiddle.net/QR3kP/32/

---

See the compatibility chart here: http://kimblim.dk/css-tests/selectors/

See the CSS selectors here: http://www.w3.org/TR/CSS2/selector.html

Answer 2

The best way would be to place a class onto each of the spans and apply the float to each ot the classes

HTML

<span class="left">$</span><span class="right">1000</span>

CSS

.left{float:left;}
.right{float:right;}