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.