CSS: The ‘Page’ Container with Header and Footer
In typical Bryan fashion, I momentarily lost track of the obvious during my CSS Biggest Box strategizing. My definition of Biggest Box must be refined to include more detail about prose layouts—obvious details. My previous note, “CSS Blocks: Box, Column and Flow,” handles the concepts for composing within a fixed Biggest Box. Using my previous CSS layouts as a guide, the suffix Page is used to describe the Biggest Box containing prose flow.
The Page container is a Biggest Box that will have a variable vertical dimension because it contains prose flow. Its minimum height, however, should be that of the vertical dimension of the biggest box. This min-height setting is the only recognition of the vertical dimension of the Biggest Box. Once the Page container is unleashed in the design, its two companion Page ‘pieces’—the Header and the Footer—comes with the deal. Now I can summarize all of the block-level naming conventions:
| Box | The box container is a proportionate box with respect to the biggest box. |
| Column | This container makes vertical slices in the biggest box. The width is usually two-thirds or one-third the biggest-box width. My design prefers no more than two columns. |
| Flow | The Flow container works inside of Box or Column containers to handle typographic flow issues in relative em units. |
| Footer | A Page container with a fixed relative or absolute vertical height, placed *after* a Page container with a flowing vertical dimension. |
| Header | A Page container with a fixed relative or absolute vertical height, placed *before* a Page container with a flowing vertical dimension. |
| Page | The Biggest Box with a flowing vertical dimension. Its minimum height is the Biggest Box height. |
The Page concept represents a compromise between the printable and screen-presentable—everyone will not be satisfied with such a compromise. The word “Page” of course refers to what you can print out on paper and hold in your hand. The Page CSS block is literally, then, defining a Web Page.
My design goal is to suggest that this Web “page” is a variation of the Web “box”—which implies, in my squalid little world, that the Web “box” is the wave the future. The Box concept has always been with us—from the days of interactive television, to the DVD menu and now with the NetFlix.com streaming video player and the iTunes LP.
This idea of the Web “page” essentially means that there is a “paging” concept available for interaction—this Web paging concept has been, predominantly, scrolling. I’ve never liked scrolling. Scrolling is just a little bit better than clicking. So it makes sense (to me) why I temporarily overlooked this necessary feature.