Pro HTML5 and CSS3 Design Patterns

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED

Aligned Outside

HTML

<h1>Aligned Outside</h1>

<div class="parent">Parent

<p class="sized-block-outside-left">Sized Block Outside Left</p>

<p class="sized-block-outside-right">Sized Block Outside Right</p>

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

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

<p class="top left">Absolute Outside Top Left</p>

<p class="top right">Absolute Outside Top Right</p>

<p class="bottom left">Absolute Outside Bottom Left</p>

<p class="bottom right">Absolute Outside Bottom Right</p>

</div>

CSS

.parent { position:relative; height:140px; width:200px; }

.sized-block-outside-left { width:220px; margin-left:-234px; } .sized-block-outside-right {

width:220px; margin-left:100%; } .sized-float-outside-left { width:220px; margin-left:-234px;

float:left; } .sized-float-outside-right { width:220px; margin-left:100%; float:left; }

.left { position:absolute; right:100%; margin-right:5px; } .right { position:absolute;

left:100%; margin-left:5px; } .top { position:absolute; bottom:100%; margin-bottom:5px; }

.bottom { position:absolute; top:100%; margin-top:5px; }

/* Nonessential rules are not shown. */