HTML and CSS Reference
In-Depth Information
Figure 14-13.
It should look like this when we're done.
Creating the Layout
For this example, we're going to borrow a three-column layout method from Position Is Every-
thing that allows the center column's content to come first in our markup, with the left column
second, and the right content third (see
www.positioniseverything.net/ordered-floats.html
for how and why it works). Assuming the most important content is in the center column, this
is great for search engines, and also when viewed on alternate devices or with older browser
versions. We also want a small margin between the columns and the header and footer, and
the left and right columns should be indented slightly.
Our markup is fairly straightforward and properly structured, though we're going to omit
the subnav within the third column for now, and add that in later (the dummy text seen in the
screen shots throughout this example has been trimmed from the printed markup to save
space and a few trees—open
ch14_example_walkthrough_broken.html
from the topic's example
files in a text editor to get the full source, including styles, before any fixes have been applied):
<div id="header">
<h1>Header</h1>
<ul id="nav">
<li><a href="somepage.html">Nav item 1</a></li>
<li><a href="somepage.html">Nav item 2</a></li>
<li><a href="somepage.html">Nav item 3</a></li>
</ul>
</div>
