Align two spans inside td - one left and one right

Question

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

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

So, I want $ to be aligned to the far left for td and 1000 to align to the far left to td.

Is it possible?

Answer 1

You can use the following selector without using additional classes:

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

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

---

For compatibility with IE7 and above, 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 align the text inside the <td> and float with 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 using even less css declarations:

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

In the above example, the text alignment by default td remains, and you select only one brother, which immediately precedes after the first span . Then you just float right. Of course, you can use the ~ selector, which is the same in this case .

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

---

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

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

Answer 2

Probably the best thing to do is with float.

 <td colspan="5"><span class="left">$</span><span class="right">1000</span></td> 

CSS

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

jsFiddle: http://jsfiddle.net/NLZU5/

Answer 3

The best way is to place a class on each span and apply a float to each class.

HTML

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

CSS

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

Answer 4

The easiest way is to put the first to the left and the second to the right

http://jsfiddle.net/L3QU2/1/

 <table width="100%"> <tr> <td colspan="5"> <span style="float:left">$</span> <span style="float:right">1000</span></td> </tr> </table> 

Answer 5

Try the following:

 <table style="width:100%"> <tr> <td colspan="5"><span style="float:left;">$</span><span style="float:right;">1000</span></td> </tr> </table> 

Demo

Answer 6

You can set float: left to span containing $ and float: right to span containing the amount of your dollar.

Here is a simple demonstration of this.

Answer 7

You can define a float style for spans using CSS classes.

 <style> .left { float: left; } .right { float: right; } </style> <table> <tr> <td colspan="5"> <span class="left">$</span> <span class="right">1000</span> </td> </tr> </table>