Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Fluid Layout

Problem You want to lay out sections in rows and columns that dynamically and fluidly adapt to the
width of the viewport, available fonts, and zoom level. You want the layout to grow and
shrink with the width of the viewport, but you also want to limit how much it can grow and
shrink. You want columns to revert automatically to rows when the viewport isn’t wide
enough for side-by-side display. You want to nest layouts within layouts, and you want to
predictably intermingle them with content in the normal flow.

Solution You can nest sections within sections to create multilevel layouts in rows and columns. A
parent section can be floated or nonfloated! The initial section is the element, which
by default stretches to the width of the viewport. You can set the widths of all other sections
to width:PERCENT or width:auto to scale the entire layout to the width of the viewport.
You can lay out sections in columns by floating them left. Their parent becomes a row, and
you can divide the row’s width among its columns by assigning a percentage to each
column’s width. Column widths in a row normally total 100%. When a row grows or shrinks,
so do its columns.
You can embed an outside-in box within each section so you can size it without interference
from margins, borders, and padding. To reliably select outside-in boxes at different levels of
nested floats, you can assign a class to them that is unique to each level. In the example, I
use three classes, oi1, oi2, and oi3, to identify outside-in boxes at specific nesting levels.
This lets me select level 2 boxes without also selecting descendant level 3 boxes.
You can ensure that a section always expands vertically to encompass all its content by
inserting a float divider after the last float in the section. A float divider also starts the
following section in a new row.

Pattern^

HTML

CSS #SECTION_ID { float:left; width:PERCENT;
max-width:VALUE; min-width:VALUE; }
#SECTION_ID .oiLEVEL { min-height:+VALUE; margin:+VALUE;
border:WIDTH STYLE COLOR;
padding:+VALUE; background:STYLES;
display:block; }
.float-divider { clear:both; display:block;
height:1px; font-size:1px; line-height:1px; }

Location This pattern works anywhere.

Related to Outside-in Box, Floating Section, Float Divider; Floated Box (Chapter 4); Margin, Border,
Padding, Background (Chapter 6); Float and Clear (Chapter 7); Offset Float (Chapter 8);
Blocked (Chapter 11)