Question

I use this code to right align a button.

<p align="right">
  <input type="button" value="Click Me" />
</p>

But <p> tags wastes some space, so looking to do the same with <span> or <div>.

Answer 1

Which alignment technique you use depends on your circumstances but the basic one is float: right;:

<input type="button" value="Click Me" style="float: right;">

You’ll probably want to clear your floats though but that can be done with overflow:hidden on the parent container or an explicit <div style="clear: both;"></div> at the bottom of the container.

For example: http://jsfiddle.net/ambiguous/8UvVg/

Floated elements are removed from the normal document flow so they can overflow their parent’s boundary and mess up the parent’s height, the clear:both CSS takes care of that (as does overflow:hidden). Play around with the JSFiddle example I added to see how floating and clearing behave (you’ll want to drop the overflow:hidden first though).