CHAPTER 17 ■ LAYOUTS
- Template shows how to define positions using an alphabetical character and the
position property. - Layout Example shows how these design patterns can be combined and
extended.
Fluid Layout Overview
HTML
<body><h1>Fluid Layout Overview</h1><div id="nav">
<h2>Navigation</h2>
<p>20% of container's width.</p></div><div id="main">
<h2>Main</h2>
<p>40% of container's width.</p></div><div id="news">
<h2>News</h2>
<p>20% of container's width.</p></div></body>CSS
body { max-width:1000px; margin-left:auto; margin-right:auto; }div { background-color:gold; margin-right:10px; padding:5px;
border-left:1px solid gray; border-right:2px solid black;
border-top:1px solid gray; border-bottom:2px solid black; }#nav { float:left; width:20%; min-width:170px; }
#main { float:left; width:40%; min-width:170px; }
#news { float:left; width:20%; min-width:170px; }/* Nonessential rules are not shown. */