CODEWITHSUNDEEP
javascriptjqueryhtmlcss
stack
stack

Reputation: 10218

How can I put a link on the right side?

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?

Upvotes: 1

Views: 95

Answers (6)

VXp
VXp

Reputation: 12058

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>

Upvotes: 2

bobharley
bobharley

Reputation: 702

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>

Upvotes: 1

Emad Dehnavi
Emad Dehnavi

Reputation: 3441

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/

Upvotes: 0

pryashrma
pryashrma

Reputation: 102

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;

Upvotes: 1

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 1

Suren Srapyan
Suren Srapyan

Reputation: 68635

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>

Upvotes: 1

Related Questions