Page Layout with CSS
Internet Explorer didn’t support position:fixed prior to version 7, though most other
browsers have supported it for years. If you need fixed positioning to work in long-
outdated versions of IE, you may have to resort to some special CSS trickery, or use
JavaScript to reproduce the effect with position:absolute and dynamically update the
offset as the window scrolls. You can find several solutions via the search engine of your
choice; just search for something like “fixed positioning in IE6” and you’ll be on your way.
Summary
This chapter showed you just a few techniques you can use to lay out your pages with CSS. When you get
right down to it, page layout is a delicate art of arranging boxes, and you learned about the CSS box model
to prepare you for that. Clever application of the float property can turn boxes into tidy columns, and
sensible use of the position property can place those boxes anywhere on the page.
CSS is a rich language for describing the presentation of content, granting web designers powerful
influence over color, spacing, typography, and decorative imagery. Alas, CSS is still a bit awkward when it
comes to something as seemingly simple as arranging blocks of content into columns, or aligning boxes
into orderly rows without sacrificing flexibility. Tables form rows and columns naturally, but tables are the
wrong tool for describing page layout, so we make do with the tools we have.
CSS3 hopes to at long last address the shortcomings of page layout with CSS. The forthcoming Template
Layout module (w3.org/TR/css3-layout) and Flexible Box Layout module (w3.org/TR/css3-flexbox)
both hold great promise for the future, but they’re still works in progress at the time of this writing near the
end of 2011. Some browsers have implemented experimental support for a few aspects of these new
layout modules, but other browsers don’t support them in any way. Until the specifications are a bit closer
to complete and the browser market has had a chance to get on board, web designers may be better off
using time-tested layout techniques for now. And of course, all of this may have changed by the time you
read these words.
Laying out web pages with CSS can be difficult and you can expect to make a lot of mistakes when you
first dive in. Even the most seasoned professionals who have been at it for years still face tricky layouts
that demand a lot of trial and error, and every new project brings new challenges. There are a lot more tips
and techniques you’ll pick up in time but we hope this chapter has at least given you a good head start.
In Chapter 10 you’ll get to follow along as we design and build a simple website from the ground up,
putting to use some of the techniques you’ve just seen, and showing off a few more while we’re at it.
