making content flush with bottom of browser

[rbragg]

Good morning! I have two stacked tables. I would like the bottom table to always be flush with the bottom of the browser.

top table:

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

bottom table:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

In Mozilla, this does make the bottom table flush with the bottom of the browser but leaves white space between the content and copyright tables, causing a need for extra scrolling.

In IE, on pages where the content is less than the resolution (and no scrolling is needed), the bottom table is directly after the top table instead of at the bottom of the screen. How do I make the bottom table to always be flush with the bottom of the browser in any browser?

Thanks in advance!

[KDLA]

This will help: http://alistapart.com/articles/footers

[rbragg]

Thank you for the link! However, I've looked at this and tutorials like it all afternoon to no avail. Maybe someone can help with my particular problem:

html, body { height:100%; }
#contain { position:relative; min-height:100%; height:100%; }
#content { height:auto; }
#footer { position:absolute; bottom:0; width:100%; height:50px; }

<div id="contain">

<div id="content"><table width="100%" height="100%"></table></div>
<div id="footer"><table></table></div>

</div>

I have the same problems as mentioned in my first post.