totn CSS

CSS: right property

This CSS tutorial explains how to use the CSS property called right with syntax and examples.

Description

The CSS right property defines the right position of an element in combination with the position property.

Syntax

The syntax for the right CSS property is:

right: value;

Parameters or Arguments

value

The right value when positioning an element using the position property. It can be one of the following:

Value Description
fixed Fixed value expressed in pixels, em's, etc.
div { position: relative; right: 6px; }
div { position: absolute; right: 8em; }
percentage Percentage value
div { position: fixed; right: 10%; }
auto This is the default behavior
div { position: relative; right: auto; }
inherit Indicates that the element will inherit the right from its parent element
div { position: inherit; }

Note

  • When the value is provided as a percentage, it is relative to the width of the containing block.
  • If the position property is set to relative, absolute, or fixed, you can set the top, right, bottom, and right properties.
  • If the position property is set to static, he top, right, bottom, and right properties do not apply.
  • See also the position, top, bottom, and left properties.

Browser Compatibility

The CSS right property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
    • static, relative, absolute: IE 4
    • fixed: IE 7
  • Opera
  • Safari (WebKit)

Example

We will discuss the right property below, exploring examples of how to use this property in CSS.

Relative Position

Let's look at an example where we set the position property to relative and set a value for the right property.

The CSS would look like this:

.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }

.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }

.totn2 { position: relative; right: 15px; }

The HTML would look like this:

<div class="totn_container">
  <div class="totn1">Div 1 - techonthenet.com</div>
  <div class="totn2">Div 2 - techonthenet.com</div>
  <div class="totn3">Div 3 - techonthenet.com</div>
</div>

The result would look like this:

CSS

In this CSS position example, we have set the totn2 class to have a position of relative and the right property is set to 15px. What this means is that the div element (identified by the totn2 class) will be moved 15px from the right, relative to where it would have been positioned in a normal layout.

Absolute Position

Let's take a look at what would happen if we tried setting the position property to absolute for the second div and set a value for the right property.

The CSS would look like this:

.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }

.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }

.totn2 { position: absolute; right: 15px; }

The HTML would look like this:

<div class="totn_container">
  <div class="totn1">Div 1 - techonthenet.com</div>
  <div class="totn2">Div 2 - techonthenet.com</div>
  <div class="totn3">Div 3 - techonthenet.com</div>
</div>

The result would look like this:

CSS

In this CSS position example, we have set the totn2 class to have a position of absolute and the right property is set to 15px. What this means is that the div element (identified by the totn2 class) will be moved within its parent container to an absolute position of 15px from the right of the container.

Fixed Position

Let's take a look at what would happen if we tried setting the position property to fixed for the second div and set a value for the right property.

The CSS would look like this:

.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }

.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }

.totn2 { position: fixed; right: 15px; }

The HTML would look like this:

<div class="totn_container">
  <div class="totn1">Div 1 - techonthenet.com</div>
  <div class="totn2">Div 2 - techonthenet.com</div>
  <div class="totn3">Div 3 - techonthenet.com</div>
</div>

The result would look like this:

CSS

In this CSS position example, we have set the totn2 class to have a position of fixed and the right property is set to 15px. What this means is that the div element (identified by the totn2 class) will be moved within the screen's viewport to a fixed position of 15px from the right of the viewport.

Share on: