Although it is recommended that divs be used for page layouts there may be
situations when tables still remain in use for complex layouts. They may be used
solely on a Web page or they may coexist with layers and appear nested within them.
Layers load and appear on a Web page much quicker than tables, which tend to be nested at
greater levels than layers, and carry more overhead in terms of the markup and properties
that comprise them. Layers load and appear progressively within a Web page during loading whereas tables
appear only when the Web page has completed loading. Below is an example of a fixed-width Web page
layout using left, center and right regions, which form a standard template using div layers.
It is important to understand that the float: left and float: right CSS properties align layers
either left or right relative to another layer. The property clear: both will clear the relative
alignment and begin alignment of the next layer at an offset immediately below the previous relative
layer of the greatest height. The absolute pixel width of the layout could be substituted for the
relative width of 100% in the example below, since this is a fixed-width layout. The properties
text-align: center and align: center align the text and entire containing layer, respectively.
The example below depicts the explanation above for creating a fixed-width Web page layout using div layers only.
Tables and other elements may be contained in any of the template layers. Text paragraphs have been placed
inside each layer for the sake of simplicity. Note that the layout is vertically dynamic, but horizontally static.
center top header content here
center top header content here
center left content here
center left content here
center left content here
center left content here
center left content here
center left content here
center middle content here
center middle content here
center middle content here
center middle content here
center middle content here
center middle content here
center middle content here
center right content here
center right content here
center right content here
center right content here
center bottom footer content here
center bottom footer content here