Pro HTML5 and CSS3 Design Patterns

CHAPTER 7 ■ POSITIONING MODELS

Static

HTML

<h1>Static</h1>

<div class="gp">Positioned Grandparent

<div class="parent">Non-positioned Parent

<div id="zs" class="box">Sized Static Block </div>

<div id="ss" class="box">Stretched Static Block</div>

<div class="box"> <span>Shrinkwrapped Static Inline</span>

<span>Shrinkwrapped Static Inline</span>

<span>Shrinkwrapped Static Inline</span>

<span>Shrinkwrapped Static Inline</span>

</div></div></div>

CSS

span { position:static; margin:40px; line-height:32px;

padding:3px; border:2px solid black; background-color:yellow; }

#zs { position:static; width:120px; height:100px; margin:10px auto; }

#ss { position:static; width:auto; height:auto; margin:10px 50px; }