Pro HTML5 and CSS3 Design Patterns

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED

Offset Relative

HTML

<h1>Offset Relative</h1>

<div>

<p class="relative offset-none">

When inline content is relatively offset, it retains its

<span class="relative offset1"> rendered shape</span>—including

line breaks.</p>

<p class="relative offset2 float">Float </p>

<p class="relative offset3 sized">Sized Static </p>

<p class="relative offset4 indented">Indented Static Block </p>

</div>

CSS

.float { float:left; width:90px; height:40px; } .sized { width:90px; height:40px; margin-

left:auto; margin-right:0; } .indented { margin-left:60px; margin-right:60px; }

.relative { position:relative; }

.offset1 { left:0px; top:-12px; } .offset2 { left:-50px; top:10px; } .offset3 { left:50px;

top:10px; } .offset4 { left:0px; top:-32px; }

/* Nonessential rules are not shown. */