CHAPTER 9 ■ POSITIONING: ADVANCED
Right Aligned
HTML
<h1>Right Aligned</h1>
<div class="gp">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="zs" class="example">Sized Static Block </div>
<div id="ss" class="example">Stretched Static Block</div>
<span id="za" class="example">Sized Absolute</span>
<span id="wa" class="example">Shrinkwrapped Absolute</span>
<span id="sa" class="example">Stretched Absolute</span></div></div>CSS
.gp { position:relative; height:295px; width:600px; border:2px solid black; }
.parent { margin:10px; padding:10px; padding-top:0; border:1px solid black; }
.example { padding:5px; border:5px solid black; background-color:gold; }#zs { position:static; text-align:right; margin-top:5px;
width:400px; margin-left:auto; margin-right:0; }
#ss { position:static; text-align:right; margin-top:5px;
width:auto; margin-left:0; margin-right:0; }
#za { position:absolute; text-align:right; top:0; margin-top:155px;
width:400px; left:auto; margin-left:auto; right:0; margin-right:0; }
#wa { position:absolute; text-align:right; top:0; margin-top:200px;
width:auto; left:auto; margin-left:auto; right:0; margin-right:0; }
#sa { position:absolute; text-align:right; top:0; margin-top:245px;
width:auto; left:0; margin-left:0; right:0; margin-right:0; }