Setting Up the HTML Code

so it is harder to move sections of the layout without restructuring the markup completely.

CSS-based layouts, on the other hand, are generally smaller in file size and much more flexible.

The HTML code for this lesson is comprised of seven main containersan <h1> element and six <div> elements as shown in Listing 21.1.

Listing 21.1. HTML Code Containing the Markup for a Three-Column Layout

<h1>
    Sitename
</h1>
<div id="container">
    <div id="container2">
        <div id="content">
            <h2>
                Page heading
            </h2>
            <p>
                Lorem ipsum dolor sit amet...
            </p>
        </div>
        <div id="news">
            <h3>
                News
            </h3>
            <p>
                Lorem ipsum dolor sit amet...
            </p>
        </div>
        <div id="nav">
            <h3>
                Sections
            </h3>
            <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="footer">
            Copyright &copy; Sitename 2005
        </div>
    </div>
</div>