CHAPTER 17 ■ LAYOUTS
bugs that sometimes cause floats not to be placed side by side when they should be. For example, in the
third set of divisions, Internet Explorer 6 moves the second float below the first. Internet Explorer 7 fixes
these bugs.The Outside-in design pattern solves all these problems (including the ones with Internet Explorer). Thus,
it’s an essential design pattern for creating fluid layouts. The alternative is to hack away at percentages
until you find something that works in most browsers and looks close to what you want most of the time.Floating Section
HTML
<h1>Floating Section</h1>
<div id="nav" class="section">
<div class="oi">
<h2>Navigation Section</h2>
<p>25% of container's width.</p>
</div>
</div>
<div id="main" class="section">
<div class="oi">
<h2>Main Section</h2>
<p>75% of container's width minus 80-pixel left margin, 1-pixel left border,
2-pixel left border, and 80-pixel left padding.</p>
</div>
</div>CSS
.oi { background-color:gold;
border-left:1px solid gray; border-right:2px solid black;
border-top:1px solid gray; border-bottom:2px solid black; }#nav { float:left; width:25%; min-width:170px; }
#nav .oi { min-height:150px; margin:0; padding:5px; }
#main { float:left; width:75%; min-width:170px; }
#main .oi { min-height:150px; margin-left:80px; padding:5px; padding-left:80px; }
/* Nonessential rules are not shown. */