Display button right-aligned below paragraph

Question

I've got a text-paragraph and a button. I want to display the button right-aligned below the text but I can't quite get it to work.

This is how it currently looks like:

How can I do this WITHOUT float (it falls in the element below it if I set float: right )

Answer 1

This could do it width inline-block + transform .

JsFiddle

 a { display: inline-block; background: yellow; padding: 5px 10px; transform: translateY(100%); } 

 I've got a text-paragraph and a button. I want to display the button right-aligned below the text but I can't quite get it to work. <a href="#">Link text</a> 

Answer 2

Just use the desired vertical-align , eg

 button { vertical-align: -75%; } 

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. <button>Button</button> </p> 

Answer 3

One way could be putting it in a div, with the width set to 100% (that is, if the div and paragraph share parents) and then set the divs text-align to right.

<div>
   <p>....</p>
   <div style="width:100%; text-align:right;">
       <button>click here</button>
   </div>
</div>

Answer 4

Is this what you're looking for?

 div { width: 400px; } button { display: inline-block; background: orange; padding: 5px 10px; margin-left: 300px; width: 100px; } 

 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<button>Click Me</button> 

Answer 5

If I understand your question correctly, the following fiddle should work. Here is the fiddle: http://jsfiddle.net/cLyycy3d/

CSS:

button {
    float: right;
}