Design > Table-less Layout >

Tabled to Table-less Conversion, 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, but the problem can be seen in the final version, which has a longer main content section. Additionally, on this 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 4

Tabled to Table-less Conversion, Final