CSS right

The CSS right property is used to define the horizontal position of an element, from the right edge. This property only effects on positioned element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{position: relative; width: 220px; height: 120px; border: 2px solid red;}
      .b{position: absolute; right: 20px; color: blue;}
   </style>
</head>
<body>

   <div class="a">
      <div class="b">fresherearth</div>
   </div>

</body>
</html>

Output

fresherearth

In above example, the right: 20px moves the element to left from the right edge.

Note - The position property defines the position of an element.

CSS right Syntax

The syntax of right property in CSS, is:

right: x;

The value of x should be any of the following:

Length - Used to move an element by some custom length like 12px, 2cm etc. from right edge
auto - Used to allow browser to define the right position of an element automatically. This is the default value
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS right Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{position: fixed; background-color: red; color: whitesmoke;
         right: 30px; padding: 8px;}
      .b{position: relative; width: 240px; height: 120px;
         background-color: blue; color: whitesmoke;
         right: -30px; padding: 8px;}
      .c{position: absolute; background-color: green; color: whitesmoke;
         right: 40px; padding: 8px;}
   </style>
</head>
<body>

   <div class="a">right: 30px</div>
   <div class="b">right: -30px
      <div class="c">right: 40px</div>
   </div>

</body>
</html>

The output of above example, is shown in the snapshot given below:

Note - Giving negative value to the right property, will move an element to the right from right edge. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{position: relative; width: 260px; height: 120px; padding: 8px;
         background-color: gray; color: whitesmoke;}
      .x, .y{position: absolute; background-color: green;
         color: whitesmoke; padding: 8px;}
      .x{right: 20px;}
      .y{right: -20px;}
   </style>
</head>
<body>

   <h2>right: 20px</h2>
   <div class="a">
      <div class="x">position: absolute; right: 20px</div>
   </div>

   <h2>right: -20px</h2>
   <div class="a">
      <div class="y">position: absolute; right: -20px;</div>
   </div>

</body>
</html>

Output

right: 20px

position: absolute; right: 20px

right: -20px

position: absolute; right: -20px;

CSS Online Test

« Previous Tutorial Next Tutorial »