HTML and CSS Reference
In-Depth Information
Note Actually, the quick-and-dirty method is to place a break tag with a clear:both style attribute in
there: <br style="clear:both;" /> . It's common to see this but it's a bad practice; you can end up with
hundreds or thousands of pages that you may need to change later. Therefore, it's always better to put clear-
ing instructions for the browser in an external CSS file, however tempting the quick-and-dirty approach may
seem at the time.
Here's the amended (X)HTML:
<div id="wrapper">
<div id="header">
<img src="swanky-header-graphic.gif" alt="Swanky header graphic"
width="377" height="41" />
</div>
<div id="content-wrapper">
<div id="content-inner">
<p>We flew with Czech Airlines ... </p>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="day1.html">Day 1 (arrival)</a></li>
<li><a href="day2.html">Day 2 (kutna Hora)</a></li>
<li><a href="day3.html">Day 3 (Prague Castle)</a></li>
<li><a href="day4.html">Day 4 (up the towers, Karlstejn Castle)</a></li>
<li><a href="day5.html">Day 5 (Metro tour)</a></li>
</ul>
</div>
<div id="footer">&nbsp;</div>
</div>
And the CSS addition is here:
#footer {
clear:both;
}
Figure 7-7 shows the effect on the layout. As you can see, the left column background is
once again showing, as is the subtle one-pixel gray border around the layout. (If you cannot
see the effect in this figure, you might want to download the source code for this topic and try
this technique for yourself.)
Search WWH ::




Custom Search