Pro HTML5 and CSS3 Design Patterns

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED

Offset Float

HTML

<h1>Offset Float</h1>

<div>

<p class="float-left sized">Sized Float</p>

<p class="float-left right-retracted">Right-retracted Float</p>

<p class="float-left shrunk">Float</p>

<p class="float-right sized">Sized Float</p>

<p class="float-right left-retracted">Left-retracted Float</p>

<p class="float-right shrunk">Float</p>

<p class="float-right widened right-extended top-extended">

Right-extended & Top-extended Float</p>

<p class="float-left clear-left shrunk">Float</p>

<p class="float-right clear-right shrunk">Float</p>

</div>

CSS

.sized { width:70px; height:60px; margin:10px; }

.widened { width:175px; } .shrunk { margin:3px; padding:1px; background-color:white; }

.right-extended { margin-right:120px; } .right-retracted { margin-right:-55px; } .left-

retracted { margin-left:-185px; } .top-extended { margin-top:20px; }

.float-left { float:left; } .float-right { float:right; }

.clear-left { clear:left; } .clear-right { clear:right; }

/* Nonessential rules are not shown. */