Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED


Aligned and Offset Static Block


HTML


<h1>Aligned and Offset Static Block</h1>
<div class="gp">
<p id="left">Left Aligned</p>
<p id="left-off">Left Aligned & Offset</p>
<p id="center">Center Aligned</p>
<p id="right-off">Right Aligned & Offset</p>
<p id="right">Right Aligned</p>
</div>

CSS


#left { position:static; width:120px; margin-left:0; margin-right:auto; }
#left-off { position:static; width:200px; margin-left:50px; margin-right:auto; }
#center { position:static; width:120px; margin-left:auto; margin-right:auto; }
#right { position:static; width:120px; margin-left:auto; margin-right:0; }
#right-off { position:static; width:200px; margin-left:auto; margin-right:50px; }

/* Nonessential rules are not shown. */
Free download pdf