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 > <div > <div > <h2> Page heading </h2> <p> Lorem ipsum dolor sit amet... </p> </div> <div > <h3> News </h3> <p> Lorem ipsum dolor sit amet... </p> </div> <div > <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 > Copyright © Sitename 2005 </div> </div> </div> |