Stretched Absolute right offset

  


<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
* .grandContainer {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
  background: red;
}

* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
  background: purple;
}

* .extraStyle {
  padding: 5px;
  border: 5px solid black;
}

div.extraStyle span {
  margin-right: -60px;
  border: 1px dotted black;
}

span.extraStyle span {
  margin-right: 30px;
  border: none;
  background-color: gold;
}

#sa {
  position: absolute;
  text-align: right;
  top: 0;
  margin-top: 245px;
  width: auto;
  left: 0;
  margin-left: 0;
  right: 0;
  margin-right: -50px;
  background-color: gold;
}

</style>
</head>
<body>

<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="sa" class="extraStyle"><span>-50px</span></span>
  </div>
</div> 
</body>
</html>

Related examples in the same category

1.	'margin-right' Example
2.	margin-right: auto
3.	margin-right: 15%
4.	margin-right: 4px;
5.	Set margin for four directions
6.	Set margin left and right to auto
7.	Centered body
8.	Left Aligned and Offset Static Block
9.	Center Aligned static
10.	Right Aligned static
11.	Center-middle Aligned
12.	Right-top Aligned and Offset
13.	Aligned center horizontally for absolute position
14.	Aligned center vertically for absolute position
15.	Left Aligned Sized Static Block with margin-right: auto
16.	Sized Static Block right aligned
17.	Stretched Static Block right aligned
18.	Sized Absolute right aligned
19.	Sized Relative block

Stretched Absolute right offset : margin right « CSS « HTML / CSS

Related examples in the same category