right

  • Revision slug: CSS/right
  • Revision title: right
  • Revision id: 25242
  • Created:
  • Creator: Waldo
  • Is current revision? No
  • Comment formatting

Revision Content

{{template.CSSRef()}}

Summary

The right property specifies part of the position of positioned elements.

For absolutely positioned elements (those with {{template.Cssxref("position")}}: absolute or position: fixed), it specifies the distance between the right margin edge of the element and the right edge of its containing block.

  • {{template.Xref_cssinitial()}}: {{template.Cssxref("auto")}}
  • Applies to: positioned elements
  • {{template.Xref_cssinherited()}}: no
  • Percentages: refer to height of containing block
  • Media: {{template.Xref_cssvisual()}}
  • {{template.Xref_csscomputed()}}: absolute length, percentage, or auto

Syntax

right: <length> | <percentage> | auto | inherit ;

Values

{{template.Xref_csslength()}} 
A length, can be negative, zero, or positive.
{{template.Xref_csspercentage()}} 
A percentage of the containing block's width.

Examples

{{template.CSSRefExampleLink("right")}} (FIXME)

div { 
   position: absolute;
   right: 20px; 
   height: 200px;
   border: 1px solid #000;
}

Notes

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer ?
Firefox 1
Netscape ?
Opera ?
Safari ?

See also

{{template.Cssxref("position")}}, {{template.Cssxref("top")}}, {{template.Cssxref("bottom")}}, {{template.Cssxref("left")}}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The <code>right</code> property specifies part of the position of positioned elements.
</p><p>For absolutely positioned elements (those with {{template.Cssxref("position")}}<code>: absolute</code> or <code>position: fixed</code>), it specifies the distance between the right margin edge of the element and the right edge of its containing block.
</p>
<ul><li> {{template.Xref_cssinitial()}}: {{template.Cssxref("auto")}}
</li><li> Applies to: <a href="en/CSS/position">positioned elements</a>
</li><li> {{template.Xref_cssinherited()}}: no
</li><li> Percentages: refer to height of containing block
</li><li> Media: {{template.Xref_cssvisual()}}
</li><li> {{template.Xref_csscomputed()}}: absolute length, percentage, or auto
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">right: &lt;length&gt; | &lt;percentage&gt; | auto | inherit ;
</pre>
<h3 name="Values"> Values </h3>
<dl><dt> {{template.Xref_csslength()}} </dt><dd> A length, can be negative, zero, or positive.
</dd><dt> {{template.Xref_csspercentage()}} </dt><dd> A percentage of the containing block's width.
</dd></dl>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("right")}} (FIXME)
</p>
<pre class="eval">div { 
   position: absolute;
   right: 20px; 
   height: 200px;
   border: 1px solid #000;
}
</pre>
<h3 name="Notes"> Notes </h3>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Safari</td>
    <td>?</td>
  </tr>
</tbody></table>
<h3 name="See_also"> See also </h3>
<p>{{template.Cssxref("position")}}, {{template.Cssxref("top")}}, {{template.Cssxref("bottom")}}, {{template.Cssxref("left")}}
</p>
Revert to this revision