CSS right Property

Description

The right property determines the distance from the right edge of the parent element, not including the indent, margin, and border width, to the right edge of the child element. The coordinate count depends on the value of the position property. If it is absolute, the browser window acts as the parent and the position of the element is determined from its right edge. In the case of a relative value, right is counted from the right edge of the initial position of the element. If position: relative is specified for the parent element, then the absolute positioning of the child elements determines their position from the right edge of the parent.

Initial value

auto

Applies to

Positioned elements

Inherited

No

Media

Visual

Computed value

If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'.

Animatable

Yes

CSS Version

CSS2, CSS3

JavaScript syntax

object.style.right

Syntax

right: auto | <length> | <percentage>

Values

• <length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
• <percentage>Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object.
• autoDefault position, according to the regular HTML layout of the page.

Example

<div class="leftcol">Column 1</div> <div class="centercol">Column 2</div> <div class="rightcol">Column 3</div> 

.leftcol { 
   position: absolute;
   top: 20px;
   left: 10px;
   width: 100px;
   background: #fc3; 
   border: 1px solid #000;
   padding: 10px; 
} 
.centercol { 
   position: relative;
   background: maroon;
   padding: 10px;
   color: white; 
   border: 1px solid #000; 
   margin: 20px 240px 0 140px;
} 
.rightcol { 
   position: absolute;
   top: 20px;
   right: 10px;
   width: 200px;
   background: #ccc; 
   border: 1px solid black; 
   padding: 10px; 
}

Browser Support

Desktop
5.5	12	1	1	5	1
Tablets / Mobile
1	18	4	14	1	1.0

Last updated by CSSPortal on: 3rd November 2019