CSS right

CSS right property decides the right offset (right edge of element offset from right edge of container) for positioned elements. An element is considered positioned if its position property has value other than static.

CSS property right

CSS version: CSS 2.1
Value: length | percentage | auto | inherit
Initial: auto
Applies to: positioned elements
Inherited: no
Percentage: percentage of width of containing block
Few points to note

  1. Property right can be applied to positioned elements (fixed, relative, absolute)
  2. For absolute element the offset is relative to nearest positioned container.
  3. For relative element the offset is relative to the element’s normal position itself.
  4. In case value is specified as percentage, it is percentage of containing block width.
  5. Negative values are ok.

Example – css right property

In the following code, CSS property right can be changed to the following values
  • 0
  • 50px
  • 10%
  • -10px
<style type="text/css">
.container {
  position: relative;
  background-color: gray;
  width:200px; height: 100px;
}
.boxwithoffset {
 position: absolute;
 background-color:lightblue;
  width: 80px;
 right:0 ; top: 0;
}
</style>
<div class="container">
  <div>regular text</div>
  <div class="boxwithoffset">box with right offset</div>
</div>
right refresh

Related

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments