Place a button right aligned
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).
If the button is the only element on the block:
.border {
border: 2px blue dashed;
}
.mr-0 {
margin-right: 0;
}
.ml-auto {
margin-left:auto;
}
.d-block {
display:block;
}<p class="border">
<input type="button" class="d-block mr-0 ml-auto" value="The Button">
</p>If there are other elements on the block:
.border {
border: 2px indigo dashed;
}
.d-table {
display:table;
}
.d-table-cell {
display:table-cell;
}
.w-100 {
width: 100%;
}
.tar {
text-align: right;
}<div class="border d-table w-100">
<p class="d-table-cell">The paragraph.....lorem ipsum...etc.</p>
<div class="d-table-cell tar">
<button >The Button</button>
</div>
</div>With flex-box:
.flex-box {
display:flex;
justify-content:space-between;
outline: 2px dashed blue;
}
.flex-box-2 {
display:flex;
justify-content: flex-end;
outline: 2px deeppink dashed;
}<h1>Button with Text</h1>
<div class="flex-box">
<p>Once upon a time in a ...</p>
<button>Read More...</button>
</div>
<h1>Only Button</h1>
<div class="flex-box-2">
<button>The Button</button>
</div>
<h1>Multiple Buttons</h1>
<div class="flex-box-2">
<button>Button 1</button>
<button>Button 2</button>
</div>Good Luck...