Table-less Version of an IRISM's WebZine Page
This entire page uses absolutely no tables at all for layout. It links to a modified version of the site's style sheet.
You are looking at the final result of all of the tweaking to get the tabled version converted to tableless. You can view intermediate results of each step by selecting a link included in each step, or listed in the right sidebar.
Conversion Steps
Step 1
All references to tables were removed. Layers were created using <div> tags:
- banner (new
.bannerlayer) - navigation bar (new
.navmenulayer) - main body (three-columned "table", new
.mainlayer) - left sidebar (same
.leftelement) - main content (same
.mainelement) - right sidebar (same
.rightelement)
Two of the existing library blocks remain: the left sidebar and the copyright.
However, the navigation bar library block, which contains a table, was eliminated,
and the code in this page was modified; this element no longer links to the library
and the page is not linked to the site template, either.
The <td> and the <tr> tags were converted to <div> tags.
The new layers were added to the style sheet, with 100% widths set.
After this conversion was done, the page has a new layout. If you view the converted page, you will notice that everything is laid out in the order in which it is coded in the file, and that the three-columned layout does not render.
Tabled to Table-less Conversion, Step 1
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.
Tabled to Table-less Conversion, Step 2
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.
Tabled to Table-less Conversion, Step 3
Step 4
I added 100% height and width to the class for the <body> tag.
I also set a zero margin on that element.
I set padding, to replace the missing margins, on a new outer layer (.outerlayer) that encapsulates everything.
The content still does not align properly. Next, I'm are going to try some hacks.
Tabled to Table-less Conversion, Step 4
Step 5
Finally, out of curiosity, I played with a border around the entire outer layer to see what the browser would do. And I found out that it aligned the elements! So I added a 1px border around the entire outer layer; the border color is the same as the background color. Why this works, I do not know.
However, in spite of having height attributes set to 100% on all elements, the sidebars and main content do not expand to fill the page. This page has a shorter main content, so this is not apparent on the converted page, but the problem can be seen on this page, which has a longer main content section. Additionally, on the converted page (with IE6, anyway), you can see that the side columns have extra bottom padding.
I played with resizing the columns by eliminating the browser's address and buttons toolbars, and the padding increases. My conclusion is that the browser's height routines are calculating 100% of the height relative to the browser's window height, plus some padding, instead of calculating the size relative to the longest piece of content.
A final postscript: when viewing this page in IE6 at 800 x 600 resolution, the right sidebar is longer than the left sidebar. The left sidebar is at about the browser window height plus padding as described above. The browser will at least make each element to the length needed by that element.
Tabled to Table-less Conversion, Step 5
Limitations
The bad news is that the browser (IE6) doesn't calculate the heights of the sidebar elements correctly and render them as long as the height of their parent layers. For some reason, the browser expands the sidebars to some arbitrary length that has nothing to do with their contents' lengths and nothing to do with the main content length, either. If they were table columns, the browser would fill the background with the color all the way to the bottom of the table. The browser can't seem to do it here.
Plus, the browser, if sized very small, will float the right elements out of alignment. If the table were sized too small, the browser would just add a horizontal scroll bar at the bottom.
© Iris H. Mars, 2003-2004.