right (CSS property)
| IE7+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | auto |
CSS2 |
Example
This style rule makes the element
with ID "sidebar" generate an absolutely positioned box
at the top right-hand corner of its containing block:
#sidebar {
position: absolute;
top: 0;
right: 0;
}Description
For absolutely positioned boxes, this property specifies how far the right margin edge of the box is offset from the left of the right padding edge of its containing block.
For relatively positioned boxes, this property specifies how far the right edge of the box is offset from the left of the position it would have had in the normal flow.
If both right
and left have a value other than
auto, the offset is over-constrained. If the
direction property is ltr,
right will be ignored. If direction
is rtl, left will be
ignored.
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Internet Explorer for Windows versions up to and including 6:
- compute percentage values on the basis of the width of the parent block, rather than that of the containing block
don’t support the specification of both the position and the dimensions of an absolutely positioned element using
top,right,bottom, andlefttogether; they’ll use the last vertical and horizontal position specified, and need the dimensions to be specified usingwidthandheight
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
User-contributed notes
- ID:
- #2
- Date:
- Sat, 26 Apr 2008 07:24:10 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
If you combine a "right", a "left" and a "height" declaration together with an image, the effect is different in firefox than in other browsers (opera,ie).
firefox honors the calculated width, while the other browsers honor the aspect ratio of the image.
in the following code I use a 10x10px image called green.png.
---- html file ----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id='y' style='position:absolute;width:50%;height:100px;border:1px solid red;overflow:hidden;'>
<img src='green.png' id='x' style='position:absolute;left:50px;right:50px;height:50px;' />
</div>
</body>
</html>
---- end html file ----
is there a way to get all browsers to behave like ff?
- ID:
- #1
- Date:
- Sat, 26 Apr 2008 06:30:09 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
You say "If both right and left have a value other than auto, the offset is over-constrained. If the direction property is ltr, right will be ignored."
This seems not to be true for firefox and opera:
---- html file ----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id='y' style='position:absolute;width:50%;margin-left:auto;margin-right:auto;height:100px;border:1px solid red'>
<div id='x' style='position:absolute;left:50px;right:50px;height:50px;background-color:green;'>
x
</div>
</div>
</body>
</html>
---- end HTML file ----
clearly results in both left and right set to 50px
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
