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. */