B.93. right

This property lets you set the distance between the right edge of an absolute positioned element (including its padding, border, and margin)^[11] and the right edge of the positioning context in which it resides. The positioning context is the content area of the element's nearest ancestor that has a position property value other than static, or the body element.

^[11] The CSS2 specification contains an error that suggests that the padding, border, and margin of the positioned element should not be considered. This has been acknowledged as a mistake by the CSS Working Group in the Errata document for CSS2.

For relative positioned elements, this property sets a relative offset from the normal position of its bottom edge. So a setting of 10px will shift the right edge of the box 10 pixels to the left, and a setting of -10px will shift it right by the same amount.

Inherited: No

See also: Section B.90position, Section B.20bottom, Section B.55left, and Section B.118top

B.93.1. Value

A CSS length measurement, a percentage value, or the auto constant. Percentages are based on the width of the parent element. The auto constant tells the browser to determine the position of the right edge itself, based on whatever other constraints may exist on the size/position of the element.

Initial value: auto

B.93.2. Compatibility

CSS Version: 2

Works in Internet Explorer 5 or later, Netscape 6 or later, and Mozilla browsers.

Often, the same effect can be achieved by setting the left property of a box. Since left is supported by more browsers than right, this should be done whenever possible.

B.93.3. Example

This style rule positions the element with ID menu against the right edge of the document (assuming it is in the body's positioning context):

#menu {
  position: absolute;
  right: 0;
  width: 100px;
  height: 200px;
}