Home HTML CSS JavaScript jQuery ReactJS NodeJS About us Blogs Faqs

CSS right Property

The right property specifies a portion of a positioned element's position. For absolute or fixed positioned elements, the right property is used to set the right margin edge of the element as well as the right edge of its containing block.

Syntax

 
right: auto | length | initial | inherit;

Example

​x
 
<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        position: relative;
        width: 300px;
        height: 200px;
        border: 2px solid #00ab55;
    }
​
    .inner-box {
        position: absolute;
        right: 15px;
        width: 100px;
        height: 100px;
        border: 2px solid #ff4842;
    }
</style>
</head>
<body>
​
<div class="box">
    <div class="inner-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
​
</body>
</html>
Preview

Property Values

Value Description
auto Allows the browser to calculate the correct edge position. This is the default setting.
length Sets the right edge position in pixels, centimetres, and so on. Negative values are permitted. Learn more about length units.
% Determines the right edge position as a percentage of the containing element. Negative values are permitted.
initial This property is set to its default value.
inherit This property is inherited from its parent element.

Supported Browsers

Property Chrome Firefox Safari Edge / IE Opera
right 1.0 1.0 1.0 5.5 5.0