[html] Place a button right aligned

I use this code to right align a button.

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

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

In my case the

<p align="right"/>

worked fine

Another possibility is to use an absolute positioning oriented to the right:

<input type="button" value="Click Me" style="position: absolute; right: 0;">

Here's an example: https://jsfiddle.net/a2Ld1xse/

This solution has its downsides, but there are use cases where it's very useful.

It is not always so simple and sometimes the alignment must be defined in the container and not in the Button element itself !

For your case, the solution would be

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

I have taken care to specify width=100% to be sure that <div> take full width of his container.

I have also added padding:0 to avoid before and after space as with <p> element.

I can say that if <div> is defined in a FSF/Primefaces table's footer, the float:right don't work correctly because the Button height will become higher than the footer height !

In this Primefaces situation, the only acceptable solution is to use text-align:right in container.

With this solution, if you have 6 Buttons to align at right, you must only specify this alignment in container :-)

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me 1"/>
    <input type="button" value="Click Me 2"/>
    <input type="button" value="Click Me 3"/>
    <input type="button" value="Click Me 4"/>
    <input type="button" value="Click Me 5"/>
    <input type="button" value="Click Me 6"/>
</div>

If the button is the only element on the block:

.border {_x000D_
  border: 2px blue dashed;_x000D_
}_x000D_
_x000D_
.mr-0 {_x000D_
  margin-right: 0;_x000D_
}_x000D_
.ml-auto {_x000D_
  margin-left:auto;_x000D_
}_x000D_
.d-block {_x000D_
  display:block;_x000D_
}

<p class="border">_x000D_
  <input type="button" class="d-block mr-0 ml-auto" value="The Button">_x000D_
</p>

If there are other elements on the block:

.border {_x000D_
  border: 2px indigo dashed;_x000D_
}_x000D_
_x000D_
.d-table {_x000D_
  display:table;_x000D_
}_x000D_
_x000D_
.d-table-cell {_x000D_
  display:table-cell;_x000D_
}_x000D_
_x000D_
.w-100 {_x000D_
  width: 100%;_x000D_
}_x000D_
_x000D_
.tar {_x000D_
  text-align: right;_x000D_
}

<div class="border d-table w-100">_x000D_
  <p class="d-table-cell">The paragraph.....lorem ipsum...etc.</p>_x000D_
  <div class="d-table-cell tar">_x000D_
    <button >The Button</button>_x000D_
  </div>_x000D_
</div>

With flex-box:

.flex-box {_x000D_
  display:flex;_x000D_
  justify-content:space-between;_x000D_
  outline: 2px dashed blue;_x000D_
}_x000D_
_x000D_
.flex-box-2 {_x000D_
  display:flex;_x000D_
  justify-content: flex-end;_x000D_
  outline: 2px deeppink dashed;_x000D_
}

<h1>Button with Text</h1>_x000D_
<div class="flex-box">_x000D_
<p>Once upon a time in a ...</p>_x000D_
<button>Read More...</button>_x000D_
</div>_x000D_
_x000D_
<h1>Only Button</h1>_x000D_
<div class="flex-box-2">_x000D_
  <button>The Button</button>_x000D_
</div>_x000D_
_x000D_
<h1>Multiple Buttons</h1>_x000D_
<div class="flex-box-2">_x000D_
  <button>Button 1</button>_x000D_
  <button>Button 2</button>_x000D_
</div>

Good Luck...

a modern approach in 2019 using flex-box

with div tag

<div style="display:flex; justify-content:flex-end; width:100%; padding:0;">_x000D_
    <input type="button" value="Click Me"/>_x000D_
</div>

with span tag

<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">_x000D_
    <input type="button" value="Click Me"/>_x000D_
</span>

To keep the button in the page flow:

<input type="button" value="Click Me" style="margin-left: auto; display: block;" />

(put that style in a .css file, do not use this html inline, for better maintenance)

<div style = "display: flex; justify-content:flex-end">
    <button>Click me!</button>
</div>

<div style = "display: flex; justify-content: flex-end">
    <button>Click me!</button>
</div>

This would solve it.

<input type="button" value="Text Here..." style="float: right;">

Good luck with your code!

Another possibility is to use an absolute positioning oriented to the right. You can do it this way:

style="position: absolute; right: 0;"

This solution depends on Bootstrap 3, as pointed out by @günther-jena

Try <a class="btn text-right">Call to Action</a>. This way you don't need extra markup or rules to clear out floated elements.