Sized Absolute right aligned

  

<!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;
}

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

#myAbsolute {
  position: absolute;
  text-align: right;
  top: 0;
  margin-top: 155px;
  width: 400px;
  left: auto;
  margin-left: auto;
  right: 0;
  margin-right: 0;
  background-color: gold;
}</style>
</head>
<body>

<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="myAbsolute" class="example">Sized Absolute</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 Relative block
19.	Stretched Absolute right offset

Sized Absolute right aligned : margin right « CSS « HTML / CSS

Related examples in the same category