Stretch Absolute right offset in HTML and CSS

Description

The following code shows how to stretch Absolute right offset.

Example


<html>
<head>
<!--from   ww w .j  a  v  a2s  . com-->

<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>

Click to view the demo

The code above generates the following result.

Stretch Absolute right offset in HTML and CSS

Home »
  HTML CSS Tutorial »
    Layout »
      Position

...
Fix block with width and height to left and...
Put Elements in fixed position stay in plac...
Use fixed position with top and left settin...
Absolute left offset Stretch a block in HTM...
Align Sized Absolute block right in HTML an...
Center a div element with absolute to four ...
Compare the absolute and relative CSS Posit...
Create absolute position with bottom and ri...
Create absolute position with top and right...
Doc absolute positioning blocks in HTML and...
Do absolutely positioned relative to the br...
Do left align the left side of an absolute ...
Do position absolute layout and set z-index...
Force element to horizontally stretch conte...
Layout absolute to left top, and right bott...
Place element absolute outside Top Right wi...
Put div to right bottom corner with absolut...
Stick element to the left bottom with absol...

Stretch Absolute right offset in HTML and C...