The Table
⋮
<td>Winner of Match 9</td>
</tr>
First, we set a background color on the
td
elements within
tbody
. While working
on this element, I added some left padding to move the
td
s away from the border,
and line them up with the headings:
File: fixedwidth.css (excerpt)
table.schedule tbody td {
background: #e9ecee;
padding-left: 0.6em;
border-bottom: 4px solid #ccc;
}
Now, let’s create a rule for the
tr
elements that have a
class
of
odd
. We can set
the background color on these rows:
File: fixedwidth.css (excerpt)
table.schedule tbody tr.odd {
background: #c4cfdb;
}

odd
.
4. There are
td
elements within those
tr
s.
Figure 10.13 shows the results of our work.
279
Licensed to
Chapter 10: Fixed-width Layouts
Figure 10.13. After styling the
odd
rows
Finally, let’s style the links that appear in this table. There are two sets of links:
those in the row headings down the side of the table, and those associated with
the dates in the table cells.
First, we style the links within the
th
element:
File: fixedwidth.css (excerpt)
table.schedule tbody tr th a:link {
font-weight: bold;
color: #5e7796;
text-decoration: underline;
}
table.schedule tbody tr th a:visited {
font-weight: bold;
color: #5e7796;
}

itioning or floating the columns.
281
Licensed to
Chapter 10: Fixed-width Layouts
Positioned Columns
To use absolute positioning to add a second column to this layout, we need first
to add the column—or sidebar—text to the page in its own
div
. Let’s add an ID
of
extras
just after the closing
</div>
tag of this
div
. On a real site, this sidebar
might contain advertising, or additional information about the matches or venue,
but for our purposes, dummy text will be fine.
In the natural flow of the document, this text displays below the white box, as
Figure 10.15 illustrates.
Figure 10.15. The sidebar
div
before any CSS is added
As with the liquid layouts we created previously, we need to wrap this sidebar
content inside two
div
s—one will provide our positioning context, while the
other will help us make room for the sidebar. Add the two
div
s as shown in the

</div> <!-- wrapper -->
We can now add style rules for these
div
s. The content wrapper applies a 200-
pixel left margin to the sidebar, while the main
div
provides its positioning con-
text.
File: fixedwidth.css (excerpt)
#content-wrapper {
margin: 0 0 0 200px;
}
#main {
position: relative;
}
Refresh your page in the browser, and you should see that a space has been created
for the sidebar. Our next step is to position the column within this space. Simply
use the following CSS to position this sidebar from the top and left, or top and
right, of the browser’s viewport:
File: fixedwidth.css (excerpt)
#extras {
position: absolute;
top: 0;
left: 0;
width: 180px;
background-color: white;
border: 1px solid #f0f0f0;
}
This CSS positions the column and gives it the same white background color and
border that the content

declaration. Figure 10.17 shows the
impact of this markup.
File: fixedwidth.css (excerpt)
#extras {
float: left;
width: 180px;
background-color: white;
border: 1px solid #f0f0f0;
}
Figure 10.17. The floated column displaying as expected in Firefox
That’s all you need to do to float your sidebar column alongside your main content
column in Firefox. However, as Figure 10.18 illustrates, Internet Explorer 6 proves
a little more troublesome.
285
Licensed to
Chapter 10: Fixed-width Layouts
Figure 10.18. Internet Explorer 6 failing to display our world cup
image, and pushing the events schedule below the sidebar
As you can see in Figure 10.18, the world cup logo is no longer being displayed,
and our events schedule table has been pushed down below the bottom of the
sidebar. Occasionally, as you test your pages in Internet Explorer 6, you’ll en-
counter bugs in its application of your CSS rules. Most of these problems have
been fixed in IE 7, but unfortunately, it will likely be some time before most users
upgrade to IE 7 and IE 6 can be ignored.
One of the most common causes of these bugs has to do with Internet Explorer’s
concept of “having layout,” which is discussed in the article “On Having Layout”.
2
A simple work-around for such bugs is to apply one of a number of declarations
2


Chapter 10: Fixed-width Layouts
These examples have shown just how flexible a CSS layout can be. Instead of
needing to rebuild your nested table layout to add new columns, you can make
big changes to your layouts with just a few additional CSS properties.
“Zoom” Layouts
Before we wrap up this chapter, let’s spend a few moments discussing a technique
that can make your site much more usable to users with various accessibility
needs. That technique involves the provision of one or more alternate style sheets
that give a different look and feel to the site in order to address particular diffi-
culties that some users experience as they work with the Web.
When we discuss accessibility, we often consider users who employ some kind
of text-only device—a screen reader that reads the content of the site aloud,
perhaps. By using semantic markup, and separating a document’s content and
structure from its presentation with CSS, we can do a lot to help these users to
understand and use our sites easily. However, these are not the only site users
who we can help by considering accessibility issues.
There are many more users who have “low vision”—they are not completely
blind, nor do they use screen readers, but they do need some help to be able to
see web site text. Many of these users have screen magnifiers that help to enlarge
on-screen elements to a size at which they can be read. As you might expect,
these users have very different requirements than those who use screen readers.
For instance, users with low vision can usually see the layout of your site, and
with the help of their magnifier, they may find diagrams, images, and other
visual elements useful. These users don’t want a text-only page—that would deny
them visual elements like images, which they can understand once they’re mag-
nified. However, the problem with many layouts is that, once they are magnified,
columns of text disappear off the edge of users’ screens, never to be found again!
Since we know how to build site layouts using CSS, we can help these users by
creating an additional style sheet that’s tailored to their specific needs. These
kinds of style sheets have been called “zoom layouts,” as they’re specially designed

While you’re working on your alternate style sheet, it’s not a bad idea to link it
as the main style sheet attached to your document, so you can see your changes
easily. Take your existing style sheet and save it as
zoom.css
, then attach it to
your document. Now, disable your existing style sheet by wrapping it in a com-
ment, as shown below.
File: fixedwidth.html (excerpt)
<head>
<title>Footbag Freaks</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<!--<link rel="stylesheet" type="text/css"
href="fixedwidth.css" />-->
<link rel="stylesheet" type="text/css" href="zoom.css" />
</head>
We don’t want to use fixed widths in our zoom layout. As the text in a fixed-
width layout gets larger, one of two things will happen: either the text will become
too large for the fixed-width columns (imagine a very long word becoming longer
than the fixed-width column), or, if the column grows wider as the text gets larger,
the column will become wider than the screen itself, necessitating a horizontal
scroll bar.
First, edit the CSS rule for the
body
element to remove the
min-width
declaration
as well as the background image and color. In addition, make the base font size
large
: