12.2. Creating Columns Using CSS Float
Professional Web page designers usually divide a page into three or four major sections: a masthead along the top, a content area in the middle, and a footer along the bottom. Then they subdivide each area. The masthead might include a banner, an advertisement, a menu, and breadcrumbs. Likewise, designers often split the content area into two or three columns.
The old way to hold this structure in place was to erect a huge, complicated HTML table with lots of merged cells, spanned columns, and tricky rows. The technique still works but is on the way out (deprecated in geekspeak) for several reasons:
HTML table tags are intended to present tabular data in a meaningful way, not to lay out page structure.
People with disabilities find it harder to navigate and interpret content when you spread it across table cells.
Browsers are slower to render large, complicated tables.
Microsoft provides a good example of CSS layout in its free Small Business Starter Kit, shown in Figure 12-5 as the fictional Fabrikam corporation site. You can download the sample from www.asp.net. The following sections explore some of the significant layout features.