Pro HTML5 and CSS3 Design Patterns

CHAPTER 7 ■ POSITIONING MODELS

Positioning Models

HTML

<h1>Positioning Models</h1>

<div class="section"><h2>Before</h2>

<p><span>Static</span><span>Absolute</span>

<span>Fixed</span><span>Relative</span>

<span>Float</span><span>Relative Float</span></p></div>

<div class="section"><h2>After</h2>

<p class="static centered" >

<span class="static centered">Static</span>

<span class="absolute">Absolute</span>

<span class="fixed">Fixed</span>

<span class="relative">Relative</span>

<span class="float">Float</span>

<span class="relative float">Relative Float</span></p></div>

CSS

*.centered { width:380px; margin-left:auto; margin-right:auto; }

*.static { position:static; }

*.absolute { position:absolute; top:20px; left:215px; }

*.fixed { position:fixed; bottom:20px; right:5px; }

*.relative { position:relative; top:20px; left:30px; }

*.float { float:right; }