DIV in <td> float right

Question

I got a table with a couple <td>:

<table>
 <tr>
  <td>First</td>
  <td>Second</td>
  <td style="padding:20px;">
      <div>
        Third
      </div>
  </td>
 </tr>
</table>

What I want to do is to place the "Third" <td> (with the div) to the right side of the table and the "First" and "Second" <td> should stay left.

Style with float:right; didn't work for me...

Answer 1

You need to make your table's width 100%, then control the widths of your first 2 columns, and finally right-align your third column.

http://jsfiddle.net/25Mqa/1/

<table>
 <tr>
  <td class="first">First</td>
  <td class="second">Second</td>
  <td class="third">Third</td>
 </tr>
</table>

CSS:

table { width:100%; }
.first, .second { width:50px; }
.third { text-align:right; }