A CSS challenge!

[daGUY]

I’m stumped on this one. I have a series of (very) old sites written in HTML3 and designed with a table layout. The layout consists of three rows – a header, content area, and footer. It’s set up like this:

Code:

Logo	Site Title
Sidebar	Content
Footer

The table has a height of 100%, as do the two cells in the middle row (where the page content is). If the content is taller than the window, it naturally pushes down the footer. But if the content is shorter than the browser window, the middle row expands to fill the remaining space, keeping the footer glued to the bottom of the window.

Here’s the problem. We’re trying to transition the sites to HTML4, but table height is deprecated. Thus, with the HTML4 doctype, "height: 100%;" on the table no longer works; if the content is shorter than the browser window, the footer moves up to where the content ends.

Is there any way to either (a) keep the table layout but get it to work with HTML4, or (b) redo the site in divs but still have the desired effect (make the footer stick to the bottom edge of the window when the content is shorter than the window height)?

[mikes]

Actually, table height attribute wasn’t deprectated. It was never an official attribute of table to start with. It was just one of many attriutes that some browsers supported even though it wasn’t in the spec.

As to your question though, Chris had an article on here a while back with a link to some sticky footer code. I don’t have Chris’s article handy but here’s the link to the sticky footer code:

http://ryanfait.com/sticky-footer/

[Author]

Posts