Question

How can I position a button above a table aligned to the right?

Imagine an imaginary vertical line that is placed to the right of the table. I want right limit of the button to be placed where that line is. Here’s a draft:

As you can see, the button is aliged with the table and does not belong to the table.
The table has its sizes set to auto.
I already tried using a div as a wrapper but that didn’t work. Any alternatives?

Add: I forgot: The table is supposed to be aligned to the left.

Answer 1

Just add a div wrapper around the two with the following CSS:

display: inline-block; 
text-align: right;

jsFiddle Demo

• My solution assumes that the button is not block, in that case you also have to float it (text-align will not affect it then).

• display: inline-block; will not work on IE7, but there is a hack.

Little explanation:

display: inline-block; is the heart of this solution. It makes the container take up the width of its children, in this case probably the table (but there is no problem if the button is bigger).