Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Layout Example

HTML Structural Elements

<div id="preheader"></div>

<div id="header">

<div id="title"><h1>Layout Example</h1></div>

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

<div id="postheader"></div>

<div id="body">

<div id="nav">

<div id="site-map"><h3>Site Map</h3></div>

<div id="links"><h3>Links</h3></div></div>

<div id="main"></div>

<div id="extras">

<div id="news"><h3>News</h3></div>

<div id="about-us"><h3>About us</h3></div></div></div>

<div id="footer"></div>

CSS Structural Styles

#preheader .part1 { float:left; margin-left:10px; }

#preheader .part2 { float:right; margin-right:10px; }

#header { float:left; width:100%; }

#title { float:left; width:50%; margin-top:7px; }

#search { float:right; margin-top:2px; }

#postheader .breadcrumbs { float:left; margin-left:10px; }

#postheader .sequential { float:right; margin-right:10px; }

#body { float:left; width:100%; }

#nav { float:left; width:25%; min-width:160px; }

#main { float:left; width:50%; min-width:300px; }

#extras { float:left; width:25%; min-width:160px; }

#footer { clear:both; padding-top:40px; }