By now most people have noticed the Achilles' Heel of tabless CSS design is currently the inability to align footers to the bottom of the window. (eg. always at the very bottom until content actually overflows)

Currently you can only achieve this effect in all browsers with *gasp* tables—but it's different now in XHTML 1.0 Strict than it was in HTML 4.01 Traditional.

For some CSS purists, that fact is an acrid pill to swallow. I tend to agree with Eric Meyer though—don’t try to map table design mental models onto CSS—it’s a recipe for heartache; practicality over purism.

In my case--designing a WordPress template--I used the THEAD, TBODY, and TFOOT tags to distinguish between the blog's template header, content, and footer. Like so:

<table cellspacing="0"><thead><tr><td>

  <h1><a><img /></a></h1>

</td></tr></thead>

<tbody><tr><td>

  <div id="content"></div>

  <div id="sidebar"></div>

</td></tr></tbody>

<tfoot><tr><td>

  <p>Powered by WordPress.</p>

</td></tr></tfoot>

</table>

Then I used CSS to get the table to fill the full height of the window. Like so:

html, body, table, thead, tbody, tfoot, tr, td, h1, img {

  margin:0;padding:0;border:0

}

html, body, table { width:100%;height:100% }

thead td, tfoot td { height:1px }

td { vertical-align:top }

Remember: This solution is Section 508 Accessible, Well-Formed, and Valid XHTML 1.0 Strict markup.

Not too bad once you understand it.

Posted in: Development

This entry was posted on Thursday, June 1st, 2006 at 4:03 AM. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response.