Where does an image go for a footer on this HTML page?

Question

I want a footer image to appear at the bottom of the page. It should not be absolutely positioned; it should rise and fall as the length of the page changes. Here's an example of how it should look: http://www.nofishinmydish.com/page1.html
Here's the page I'm trying to modify: http://www.nofishinmydish.com/test.html
Finally, here's the tag: . Thanks in advance!

Answer 1

Properly floating footers are the bête noire of css layouts. There are some very clever hacks shown at this site: http://alistapart.com/articles/holygrail . Be very careful to test this in a variety of browsers. The equal-height columns trick shown there is broken in IE7.

The page you are trying to emulate has dodged the issue by using a fixed-size background image and positioning everything based on that. The weakness of that approach is that it is not at all flexible, and falls apart if the visitor increases his text size.

I know we're all supposed to use css to position everything now, but when you start writing styles like "margin-bottom: -20000px;" I think it's time to admit that there are still a few things that tables do better.

Answer 2

The best thing to do is put your whole entire page into stylesheet w/ div's because it is easier to move the items around. You could also use tables is stylesheets too.