(^214) Chapter 6 Page Layout with CSS
6.1CSS Page Layout Overview
You’ve been using CSS to configure presentation (fonts, colors, and so on) of the struc-
tural XHTML elements including headings, paragraphs, divs, and lists. You may have
noticed that using CSS results in smaller Web page documents (html files), which saves
on bandwidth and eases site maintenance. You will soon see that using CSS to configure
page layout enhances these advantages.
First, here is a little background about CSS and some acronyms you should be familiar
with. As you already know, the W3C produced a recommendation for CSS
(http://www.w3.org/TR/REC-CSS1–961217.html), now called CSS Level 1 (CSS1), in- They continued their work and produced a recommendation for CSS Level 2 or
CSS2, (http://www.w3.org/TR/1998/REC-CSS2–19980512/) in 1998. CSS2 built on
CSS1 and introduced new properties needed for positioning—known as CSS-P. CSS3 is
currently under development (http://www.w3.org/Style/CSS/current-work).
Even though CSS2 was introduced in the last millennium, commercial Web sites have
only recently begun to utilize its features. You may wonder why it has taken so long.
The reason is lack of browser support of the W3C recommendations. Only very
recently have the most current versions of commonly used browsers begun to support
these recommendations reliably and consistently. Even so, you will encounter differ-
ences in rendering when displaying pages coded using CSS-P page layout techniques in
various browsers. Keep in mind that not all Web page visitors will be using the most
current browser version. There are a number of ways to handle this issue—including
coding alternate pages or allowing the browser display to degrade gracefully. Visitors
using an older browser will see a usable, but not highly formatted Web page. Let’s take
a look at an example of a Web site that uses CSS to configure page layout.
Figure 6.1 shows the DisabilityInfo.gov (http://www.disabilityinfo.gov) home page rendered
by Firefox. The Web site uses CSS for page layout to configure a page with multiple columns.
Figure 6.1
The
DisabilityInfo.gov
home page
displayed in Firefox,
a modern browser
A visitor using an outdated, older browser such as Netscape 4.7 experiences a plain
vanilla version of the site, as shown in Figure 6.2. The content is displayed in the order