ASP.NET 3.5 For Dummies®

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.

Figure 12-4. Checking for valid XHTML at validator.w3.org.

Figure 12-5. Microsoft's Small Business Starter Kit uses CSS column layout rather than an old-fashioned Table layout.

12.2.1. Divvy up the page with ...