How can I position elements within a table cell (td) such that one element is left aligned and the other right aligned?

Question

Given the html code below:

<tr>
   <td>Some text <a href="">Some link</a> <button>Some Button</button></td>
</tr> 

I would like to achieve something like this:

Would I need to add additional mark-up such as wrapping divs to float one to the left and the other to the right? I would also need elements within the td to be vertically aligned.

What would be the best way to achieve this with minimal additional mark-up.

I have sample code here: http://jsfiddle.net/stormwild/AAw78/17/

A related problem is how to keep alignment of the text consistent among table cells when one cell contains a floated element?

Answer 1

CSS: td button { float: right; } td button { float: right; }

sorted.

Answer 2

Hi now give to float element in your buttton

<button style="float:right;">Some Button</button>

Demo

or

<button class="fr">Some button</button>

Css

.fr{
float:right;
}