Page Layout with CSS
Liquid layouts require some additional planning and testing to build in some allowances for boxes to
contract and expand and for content to reflow. Very narrow windows can become uncomfortably cramped
and elements might collide and overlap. Very wide windows can cause text to stretch out to long lines that
are harder to read, and can leave elements stranded in too much white space. It’s no wonder many
beginning web developers throw their hands up in frustration with liquid layouts, only to fall back on a
simpler fixed layout.
Although liquid layouts offer a lot more flexibility, you can still run into trouble when the
page is squeezed too narrow or stretched too wide. There are elegant solutions to these
extreme situations, and we’ll investigate some of them in Chapter 10. Stay tuned.
Although fixed width layouts are easier to build, there’s something intrinsically un-web-like about the fixed
approach. A printed page is a tangible thing wrought from wood pulp and ink, with a predetermined width
and height that will never change. You know exactly what you’re in for when you lay something out on
paper. But a web page isn’t tangible; it’s a constantly changing mosaic of pixels living in a browser portal of
unknowable dimensions. The Web as a medium is unpredictable by its very nature. Rather than fight that
fact and attempt to impose print-like precision on an imprecise canvas, perhaps it’s better to embrace the
natural fluidity of the Web and design for it instead of against it.
So in the end, which is better: fixed or liquid? The answer is easy: it depends. Some sites lend themselves
better to a liquid layout, and others may work best with a fixed width. Consider your content and your
audience, weigh the options, and make an informed choice. With that said, it’s almost impossible to go
wrong with a liquid layout, even if it’s a bit trickier to build. In an age when people are carrying three-inch-
wide computers in their pockets and web surfing on eight-foot-wide televisions in their living rooms, a bit
more forethought in the design and construction phase can make your web sites work better for everyone.
Floating Columns
Many—if not most—web pages organize content into more than one vertical column. It’s a design tradition
that goes way back to the earliest days of written language and will probably remain in fashion for a long
time to come (though you’ll find many single-column layouts on the Web, too). A typical web page layout
often consists of a main content area and one or more sidebars for supplemental content, navigation,
advertising, and so on. Arranging content into columns is the most common layout challenge you’ll face,
and you will face it time and time again. One of the most tried and true solutions to this common
predicament employs the float property, which we first introduced back in Chapter 5.
Unless otherwise specified, block-level elements stack one on top of another in the same order in which
they occur in the markup. Text and inline elements lay down in courses, fitting as many words onto a line
as possible before the excess words wrap to the next line, stacking more courses like bricks. This is the
normal flow of content; wrapping lines of text filling the width of block boxes stacked up in source order.
CSS lets you break away from that normal flow, singling out elements, altering their dimensions, and
moving them around on the page.
