Pro HTML5 and CSS3 Design Patterns

CHAPTER 4 ■ BOX MODELS

Floated Box

HTML

<h1>Floated Box</h1>

<div class="container">

<div class="default">BEFORE</div>

<div class="box small">FLOAT BEFORE</div>

<div class="box">↑ <br /> Top <br /> ← Left    

  Right → <br /> Bottom <br /> ↓ </div>

<div class="box small">FLOAT AFTER</div>

<div class="default">AFTER</div>

</div>

CSS

*.box { float:left; overflow:auto; visibility:visible;

width:220px; height:100px;

margin:10px; padding:10px; }

*.small { width:75px; height:auto; }

/* Nonessential rules are not shown.

See Inline Box for border and background properties. */