Design > Table-less Layout >

Tabled to Table-less Conversion, Step 2

The navigation button, sidebar, and main content layers were enclosed in encapsulating layers, and their original widths removed from their layers' classes (.navbaritema, .navbaritemb, .leftelement, .mainelement, .rightelement) and moved into their encapsulating layers' classes (.navitemaouter, .navitembouter, .leftouter, .mainouter, .rightouter). In order to set the widths of these elements correctly, they needed to be encapsulated in an outer layer, and those layers' classes - and not the encapsulated layers' classes - need to have the original width percents. This is because the actual width of the layer that contains the text is based on the width of the text contents plus the padding plus the border plus the margin. With the outer encapsulating layer set appropriately, the total size of the element would not be larger than those widths (unless a long piece of text without spaces, or a graphic, forces it to be longer).

The coloring and padding that was applied to the table row using the original .darkgrey class was moved to each of the navigation button elements layers' classes. Because the cell spacing and cell padding on the original table were removed, each layer's class was given a border of 1px, and the parent layer (.navmenulayer) was given top and bottom margins of 1px. To mimic the cell padding on the original table, 5px padding was added to the button classes.

Padding was also added to the left sidebar, main content, and right sidebar layers' classes (.leftelement, .mainelement, and .rightelement, respectively).

Zero-width padding, margins, and borders were forced on the parent encapsulating layers.

Notice that the elements are now all styled properly, except for their placement. The next step is to get the sidebars and navigation elements properly placed.

Tabled to Table-less Conversion, Step 1

Tabled to Table-less Conversion, Step 3