CSS 2.1 Reference: right Property

The right property is used to set the right side position of an element's box. This property can be used for elements that have a position property value of relative, absolute, or fixed. The right property is used as follows:

• For elements with a position property value of relative - The right side of the element's box is offset from the right side of its normal flow position by the value of the right property. Positive values move the element's box to the left. For example, setting the right property value to 20px will place the right side of the element's box 20px to the left of its normal flow position.
• For elements with a position property value of absolute - The right side of the element's box is offset from the right side of its containing block by the value of the right property. Its containing block is the nearest ancestor element that has its position property set to relative, absolute, or fixed. Positive right property values move the element's box to the left. For example, setting the right property value to 20px will place the right side of the element's box 20px to the left of its containing block's right side.
• For elements with a position property value of fixed - The right side of the element's box is offset from the right side of its browser window by the value of the right property. Positive values move the element's box to the left. For example, setting the right property value to 20px will place the right side of the element's box 20px to the left of the browser window's right side.

This property is specified by using a length, percentage, or keyword, according to the syntax shown above. If a percentage value is used, the value will be a percentage of the containing block's width.

CSS Example: The right properties are set for 2 different elements which are using the relative and absolute position properties.

  #tst1 {position: relative; right: 40px;}
  #tst2 {position: absolute; right: 40px;}

• auto - The right side offset is automatically set by the browser.
• inherit - The inherit keyword is used to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property will be used.