CSS Right

SQL     Data Warehousing     CSS     PHP     HTML     Database Normalization


CSS Tutorial  >  Position  >  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: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: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.

Next: CSS Overflow

Link to this page: If you find this page useful, we encourage you to link to this page. Simply copy and paste the code below to your website, blog, or profile.





Copyright © 2014   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact