O'Reilly logo

Sams Teach Yourself CSS in 10 Minutes by Russ Weakley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 19. Positioning Two Columns with a Header and a Footer

In this lesson, you will learn how to position a two-column page layout with a header and a footer. There are many ways to position these two columns. This method involves floating them both because it is the most reliable method across most modern browsers.

Setting Up the HTML Code

The HTML code for this lesson is comprised of five main containers: an <h1> element, and three <div> elements inside an overall <div> container as shown in Listing 19.1.

Example 19.1. 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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required