Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Float Divider

HTML

<h1>Float Divider</h1>

<h2>First Row of Floats</h2>

<div class="float box"><h3>Float 1</h3></div>

<div class="float box"><h3>Float 2</h3></div>

<div class="float box"><h3>Float 3</h3></div>

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

<h2>Second Row of Floats</h2>

<div class="float box"><h3>Float 4</h3></div>

<div class="float box"><h3>Float 5</h3></div>

<div class="float box"><h3>Float 6</h3></div>

CSS

.float { float:left; }

.float-divider { clear:both;

height:20px;

margin-bottom:20px;

border-bottom:5px solid black;

font-size:1px; line-height:1px; }

/* Nonessential rules are not shown. */