Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

HTML

<h1>Outside-in vs. Inside-out Design</h1>

<h2>Two floats with 50% width and no margins, borders, or padding</h2>

<div class="ex1"> Float1 </div> <div class="ex1"> Float2 </div><hr />

<h2>Two floats with 50% width and 1px border</h2>

<div class="ex2"> Float1 </div> <div class="ex2"> Float2 </div><hr />

<h2>Two floats with 45% width and 5% left margin</h2>

<div class="ex3"> Float1 </div> <div class="ex3"> Float2 </div><hr />

<h2>Two floats with 49.5% width and 5px left margin</h2>

<div class="ex4"> Float1 </div> <div class="ex4"> Float2 </div>

CSS

body { max-width:1200px; }

div { min-width:100px; }

.ex1 { float:left; width:50%; }

.ex2 { float:left; width:50%; border:1px solid; }

.ex3 { float:left; width:45%; margin-left:5%; }

.ex4 { float:left; width:49.5%; margin-left:5px; }

/* Nonessential rules are not shown. */