CODEWITHSUNDEEP
htmlcss
Leem
Leem

Reputation: 18298

How to align my link to the right side of the page?

I have a link on my index page:

<div class="content">
    <a class="buy" href="buy.html">Buy</a> 
</div>

I would like to align it to the right side of my page, I tried:

a.buy{
  color: #2da1c1;
  font-size: small;
  text-decoration: none;
  left: 252px;
  float: left;

}
a.buy:hover
{
color: #f90;
text-decoration: underline;
left: 252px;
float: left;                 
}

But it still located on the left side. (I have included my CSS file in my index.html, and the CSS file already take effect for other elements on the page)

Upvotes: 15

Views: 69718

Answers (5)

CamiEQ
CamiEQ

Reputation: 771

If you don't want to use float: right, you can change the display property of the link to block, since links are inline by default:

a.buy {
    ...
    text-align: right;
    display: block;
}

You can also use flexbox:

a.buy {
    ...
    display: flex;
    justify-content: flex-end;
}

Upvotes: 1

Budimir Grom
Budimir Grom

Reputation: 766

You may also try:

.content
{
    text-align: right;
}

Upvotes: 1

Yule
Yule

Reputation: 9754

Try the following:

a.buy{
  color: #2da1c1;
  font-size: small;
  text-decoration: none;
  float: right;

}
a.buy:hover
{
color: #f90;
text-decoration: underline;
}

Upvotes: 3

RRStoyanov
RRStoyanov

Reputation: 1172

(1) you have float: left; on the example code (2) maybe if you add float: right; to the div it will help?

Upvotes: 3

thirtydot
thirtydot

Reputation: 228152

Try float: right:

a.buy {
    color: #2da1c1;
    font-size: small;
    text-decoration: none;
    float: right;
}
a.buy:hover
{
    color: #f90;
    text-decoration: underline;         
}

Another way would be:

.content {
    position: relative
}
a.buy {
    color: #2da1c1;
    font-size: small;
    text-decoration: none;
    position: absolute;
    right: 0;
}
a.buy:hover
{
    color: #f90;
    text-decoration: underline;         
}

Upvotes: 28

Related Questions