CSS Blocks: Box, Column and Flow
With an established ‘Biggest Box’ strategy, more detail reveals the three kinds of block-level containers of my concern: Box, Column and Flow containers. These are composed within the biggest box—these names will serve as suffixes for a new naming convention used for CSS selectors.
Box Container: The box container is proportionate box to the biggest box. The box that is most useful to me is the one-third box—for my WSVGA convention, this is 341×200 ((1024/3.0) = 341.33333333333331). I see these boxes being used for holding the main navigation menu and displaying the results of AJAX calls.
Column Container: This container makes vertical slices in the biggest block. The width is usually two-thirds or one-third the biggest-box width. My design prefers no more than two columns.
Flow Container: While the Column and Box have exact, pixel-unit, proportionate dimensions, the Flow container works inside of Box or Column containers to handle typographic flow issues in relative em units. One unexpected variation here (for me) is to use flow containers for containing small, box containers. This idea comes to me from the “List View” concept in .NET client technologies.