CODEWITHSUNDEEP
css
David Van Staden
David Van Staden

Reputation: 1779

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

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?

Upvotes: 14

Views: 27355

Answers (7)

otinanai
otinanai

Reputation: 4025

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

Upvotes: 20

Andrew
Andrew

Reputation: 1880

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;}

Upvotes: 3

Dennis Traub
Dennis Traub

Reputation: 51624

You can define the float style for the 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>

Upvotes: 1

ajp15243
ajp15243

Reputation: 7952

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

Here's a simple demo of it.

Upvotes: 3

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35963

Try this:

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

DEMO

Upvotes: 2

Christian
Christian

Reputation: 19740

Probably best off doing it with floats.

<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/

Upvotes: 3

Ruan Mendes
Ruan Mendes

Reputation: 92274

Simplest way is to float the first one to the left and the second one 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>

Upvotes: 1

Related Questions