Starting with Existing HTML and CSS Code

For this lesson, you will use the HTML code from Lesson 19, "Positioning Two Columns with a Header and a Footer," as shown in Listing 20.7 and rework it for print.

Listing 20.7. HTML Code Containing the Markup for a Two-Column Layout

<div id="container">
    <h1>
        Sitename
    </h1>
    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Staff</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </div>
    <div id="content">
        <h2>
            About Sitename
        </h2>
        <p>
            Lorem ipsum dolor...
        </p>
        <p>
            Ut wisi enim ad...
        </p>
    </div>
    <div id="footer">
        Copyright &copy; Sitename 2005
    </div>
</div>

Table of Contents