Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Outside-in Box

HTML

<h1>Outside-in Box</h1>

<h2>Before</h2>

<div class="container"><div class="before float"> Float </div></div>

<div class="container"><span class="before absolute"> Absolute </span></div>

<div class="container"><div class="before static"> Static </div></div>

<div class="float-divider"></div><h2>After</h2>

<div class="container">

<div class="after float"><div class="oi"> Float </div></div></div>

<div class="container">

<span class="after absolute"><span class="oi"> Absolute </span></span></div>

<div class="container">

<div class="after static"><div class="oi"> Static </div></div></div>

CSS

.before { width:100%; margin:5px; padding:5px; border:5px solid black; }

.after { width:100%; }

.after .oi { margin:5px; padding:5px; border:5px solid black; display:block; }

.float { float:left; }

.absolute { position:absolute; }

.static { position:static; }

/* Nonessential rules are not shown. */