Design > Table-less Layout >

Tabled to Table-less Conversion, Step 3

Now I am trying to get all of the elements to align properly. All completed blocks of information (.bannerlayer, .navmenulayer, and .mainlayer) were cleared, so subsequent elements are presented below them.

All of the outer layer classes for each element within the above layers are floated left.

Notice, however, that the rightmost navigation button does not line up on the row, and the right sidebar is not aligned to the right of the main content. For some reason, the browser (IE6) does weird things when it comes to calculating widths and heights. Notice also that the left sidebar is not as long as the main content.

Next, I'm going to tweak the code to get the sidebars and navigation elements properly placed.

Tabled to Table-less Conversion, Step 2

Tabled to Table-less Conversion, Step 4