CSS Right

The right property specifies the distance from the right of the element to the default location of the element (when position=relative) or the distance between the right of the element and the right edge of the container (when position=absolute). This can be specified as a percentage, as a length, or 'auto'.

Let's illustrate with two examples:

Example 1

CSS Code

div {
background-color:#FF00FF;
width:99%;
height:60px;
}

p {
text-aligh:right;
}

The HTML code,

<div>
<p>No right property.
</div>

renders

No right property.

div {
background-color:#FF00FF;
width:99%;
height:60px;
}

p {
text-align:right;
position:relative;
right:30px;
}

<div>
<p>Apply right:30px.
</div>

Apply right:30px.

In the above example, we see applying the {position:relative; right:30px;} style shifts the text 30 pixels away from the original location.

Example 2

CSS Code

div {
background-color:#FF00FF;
width:250px;
height:60px;
}

p {
text-aligh:right;
}

The HTML code,

<div>
<p>No right property.
</div>

renders

No right property.

div {
background-color:#FF00FF;
width:250px;
height:60px;
}

p {
text-align:right;
position:relative;
right:30%;
}

<div>
<p>Apply right:30%.
</div>

Apply right:30%.

In the above example, we see applying {position:relative; right:30%;} shifts the text 30% (75 pixels) away from the original location.