Setting Up the HTML Code

Although tables can be used to create HTML page layouts, they are not ideal. Pages laid out with tables are often much larger in size due to the additional markup that is required. They are also less flexible, 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>

Table of Contents