How can I put a link on the right side?

Question

Here is my code:

 a{ display: block; border: 3px solid #ffcb08; border-radius: 100px; text-align: center; color: #222; text-decoration: none; font-weight: 300; font-size: 20px; padding: 10px; box-sizing: border-box; margin-top: 15px; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; width: 160px; float: right; } p{ border: 1px solid; } 

 <p> some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here. <a href="#">Download</a> </p> 

All I'm trying to do is putting that button on the right side without setting position: absolute; to it. How can I do that?

Answer 1

You can do it in multiple ways, here's the Flexbox way:

 text { display: flex; flex-direction: column; /* vertical stacking */ /* align-items: flex-end; affects all flex-items */ } a { align-self: flex-end; /* affects only this flex-item */ display: block; border: 3px solid #ffcb08; border-radius: 100px; text-align: center; color: #222; text-decoration: none; font-weight: 300; font-size: 20px; padding: 10px; box-sizing: border-box; margin-top: 15px; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; width: 160px; } 

 <text> some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here. <a href="#">Download</a> </text> 

Answer 2

Add float: right to it.

 a{ display: block; float: right; border: 3px solid #ffcb08; border-radius: 100px; text-align: center; color: #222; text-decoration: none; font-weight: 300; font-size: 20px; padding: 10px; box-sizing: border-box; margin-top: 15px; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; width: 160px; } 

 some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here. <a href="#">Download</a> 

Answer 3

Add this to your css

display: block;
float: right;

 a{ display: block; border: 3px solid #ffcb08; border-radius: 100px; text-align: center; color: #222; text-decoration: none; font-weight: 300; font-size: 20px; padding: 10px; box-sizing: border-box; margin-top: 15px; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; width: 160px; display: block; float: right; } 

 <text> some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here. <a href="#">Download</a> </text> 

Answer 4

EDIT: add overflow: auto to the container.

 a{ display: block; border: 3px solid #ffcb08; border-radius: 100px; text-align: center; color: #222; text-decoration: none; font-weight: 300; font-size: 20px; padding: 10px; box-sizing: border-box; margin-top: 15px; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; width: 160px; float: right; } div { overflow: auto; } 

 <div> <text> some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here. <a href="#">Download</a> </text> </div> 

Answer 5

 a{ display: block; border: 3px solid #ffcb08; border-radius: 100px; text-align: center; color: #222; text-decoration: none; font-weight: 300; font-size: 20px; padding: 10px; box-sizing: border-box; margin-top: 15px; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; width: 160px; float: right; } 

 <text> some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here. <a href="#">Download</a> </text> 

simply use: float: right;

Answer 6

This is easy with flexbox!

html :

<div class="container">
    <span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor deleniti labore voluptatem eum, delectus aperiam, qui culpa voluptate adipisci ipsum. Doloribus labore facilis id inventore omnis reprehenderit perferendis unde aspernatur.
    </span>
    <a href="#">Download</a>
</div>

css :

.container{
  display:flex;
}
.container >p{
  flex:1;
}
.container >a{
  flex:1;
}

https://jsfiddle.net/tfyrf630/