HTML and CSS Reference
In-Depth Information
<body id="cols3">
<div id="wrapper">
<div id="header"><h1>Fictional TravelCo ™</h1></div>
<div id="breadcrumb">
You are here: <a href="/travel/">Travel</a> >
<a href="/travel/destinations/">Destinations</a> > Europe
</div>
<div id="content-wrapper">
<div id="content-inner">
<p>This is the content area for some fictional corporate site. ... </p>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="/linkdest1/">Nav link 1</a></li>
<li><a href="/linkdest2/">Nav link 2</a></li>
<li><a href="/linkdest3/">Nav link 3</a></li>
<li><a href="/linkdest4/">Nav link 4</a></li>
<li><a href="/linkdest5/">Nav link 5</a></li>
</ul>
</div>
<div id="related">
<h2>Related Links</h2>
<ul>
<li><a href="/related/">Related link</a></li>
<li><a href="/related/">Another link</a></li>
<li><a href="/related/">And another</a></li>
</ul>
</div>
<div id="footer">Legal mumbo jumbo goes here</div>
</div>
</body>
</html>
■
Note
For this layout, we've used absolute positioning on the left and right columns, which we placed
using ems rather than floats. We chose this approach because the left and right columns appear after the
content in the source order and the main page content will change in size depending on the browser window
width. Width calculations are troublesome for floated layouts (because, as mentioned earlier, it's not possible
to calculate widths in CSS as 100 percent minus 200 pixels, for example). By using absolute positioning on
the left and right navigation elements and setting padding on the body content to match their widths, we can
achieve a liquid layout regardless of the HTML source order.
