Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Opposing Floats

HTML

<div id="header">

<h1 id="title">Opposing Floats</h1>

<div id="search"> <h3>Search:</h3>

<form method="post" action="http://www.tipjar.com/cgi-bin/test">

<input type="text" value="" name="searchtext" id="searchtext" size="32" />

<input type="submit" value="Search" name="find" id="find" /></form>

<p class="message">This right float shrinks no smaller than its minimum width

and grows no larger than its maximum width.</p>

</div>

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

</div>

<div id="postheader">

<p class="breadcrumbs"><a href="#">Home</a> » Floating Layout</p>

<p class="post-msg">Postheader message 1</p>

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

<p class="breadcrumbs"><a href="#">Home</a> » Floating Layout</p>

<p class="post-msg">Postheader message 2</p>

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

</div>

CSS

.float-divider { clear:both; display:block;

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

.breadcrumbs { float:left; max-width:350px; margin-left:10px; }

.post-msg { float:right; max-width:350px; margin-right:10px; }

#title { float:left; min-width:280px; max-width:350px; margin-left:0; }

#search { float:right; min-width:280px; max-width:350px; margin-right:0; }

/* Nonessential rules are not shown. */