CHAPTER 17 ■ LAYOUTSFluid Layout Overview
Problems You want to create fluid layouts that automatically adapt to different devices, fonts, widths,
and zoom factors.
You want to lay out content in columns and rows that dynamically expand and contract to
fit the width of the viewport. You want to use columns even for nontabular data, but you
can’t use tables for nontabular content because this is less accessible. (Content is tabular
only when the content of each cell is related to all cells in its row and all cells in its column.)
You want columns automatically to reflow into rows when the width of the viewport is
narrow, such as on a handheld device. You can’t use tables because they can’t render
columns as rows.
You want the width of columns to expand automatically to take advantage of a wide
viewport, but only to a certain point because extremely wide columns aren’t very readable.
You want the width of columns to shrink automatically when the width of the viewport is
narrow, but not so much that content becomes unreadable.
You want to lay out columns proportionally so that some columns have a greater
percentage of their parent’s width and some have less.
You want some columns to be aligned to the left side and others to the right—see the
Opposing Floats design pattern.
Solutions Each of these problems is solved by the design patterns in this chapter. The Fluid Layout
design pattern shows how to lay out content in rows and columns without using tables. In
turn, it relies on the Outside-in Box, Float Divider, and Floating Section design patterns.
Example The example shows only the minimum markup and styles needed to create fluid layouts. As
the chapter progresses, additional markup and styles are added to implement additional
capabilities and better reliability when combined with other markup.
The example illustrates several key capabilities of the Fluid Layout design pattern. A
maximum width is assigned to the body element so that the width doesn’t get too wide to be
usable. (For fun, I have also centered the body in the viewport.) In addition, I floated the
divisions to the left to display them as columns, but when the viewport is too narrow for all
of them to be displayed side by side, a browser automatically wraps one or more of them to
the next row. I assigned a minimum width to each division so that it doesn’t shrink too
small to be readable. Finally, I assigned a percentage to the width of each division so that it
scales proportionately to the width of the viewport.
You may want to resize the example in a browser to see how it responds to different widths.
Related to Outside-in Box, Floating Section, Float Divider, Fluid Layout