Unable to define bottom margin

Here (http://www.ignorantbliss.org/testsite/testdoors3columns.html) is a link to a test page that I'm working on (most of the links don't work and the site graphics are far from finished, but I'm trying to get the basic layout down first). What I want to do is have the container part (which contains the side bars and the center content) to fill up a bigger part of the page height-wise even when there is no content to fill that space. I don't like having that much empty space below it, but I also don't want to make it a fixed height and make the page unnecessarily high for people with smaller screen resolutions. So, I want a bottom margin that's either a fixed amount of pixels or a % of the page height, or the container to be a certain % of the page's height. When the page was first viewed in Quirks mode, setting a height in % for the container used to work, but now that it's in Standards compliance mode, suddenly it stopped working. I've tried setting a bottom or a bottom margin value in % or pixels, but there is no change. I've also tried including the footnote in the container and then setting the container's bottom margin, but still no change. Any ideas on how to make it work again?

(There is also stuff in the CSS that is not used on this specific page, but elsewhere on the site.)

Here's the CSS:

body
{
background-color: #9BB4BB;
background-image: url("graphics/bg19.gif");
}
div#title
{
background-color: #D3CEC1;
background-image: url("");
font-family: verdana, "times new roman", serif;
font-size: 100%;
color: #000000;
text-align: center;
border-top: 2px solid #413333;
border-left: 2px solid #413333;
border-right: 2px solid #413333;
padding-top: 10px;
height: 100px;
margin-left: 10%;
margin-right: 10%;
}
div#container
{
background-color: #FFFFFF;
border-top: 1px solid #413333;
border-left: 2px solid #413333;
border-right: 2px solid #413333;
border-bottom: 1px solid #413333;
margin-left: 10%;
margin-right: 10%;
padding-bottom: 100px;
top: 0px;
bottom: 0px;
position: relative;
}
div#download
{
font-family: verdana, "times new roman", serif;
font-size: 80%;
text-align: center;
color: #000000;
margin-left: 120px;
margin-right: 120px;
top: 20px;
padding: 10px;
position: relative;
z-index: 8;
line-height: 120%;
}
div#menu
{
background-color: #D3CEC1;
font-family: verdana, "times new roman", serif;
font-weight: bold;
font-size: 90%;
color: #000000;
text-align: left;
border-right: 2px solid #413333;
width: 120px;
top: 0px;
bottom: 0px;
left: 0px;
padding-left: 5px;
padding-bottom: 5px;
position: absolute;
line-height: 200%;
}
div#affiliates
{
background-color: #D3CEC1;
font-family: verdana, "times new roman", serif;
font-weight: bold;
font-size: 90%;
color: #000000;
text-align: right;
border-left: 2px solid #413333;
width: 120px;
top: 0px;
right: 0px;
bottom: 0px;
padding-right: 15px;
position: absolute;
line-height: 200%;
}
div#text
{
font-family: verdana, "times new roman", serif;
font-size: 90%;
text-align: left;
color: #000000;
margin-left: 120px;
margin-right: 120px;
top: 20px;
padding: 10px;
position: relative;
z-index: 8;
line-height: 120%;
}
div#links
{
font-family: georgia, "times new roman", serif;
font-size: 90%;
color: #000000;
text-align: center;
margin-left: 120px;
margin-right: 120px;
top: 20px;
padding: 10px;
position: relative;
z-index: 8;
}
div#footnote
{
background-image: url("graphics/translucent.png");
text-align: center;
font-family: verdana, "times new roman", serif;
font-size: 10px;
color: #000000;
border: 1px solid #000000;
height: 40px;
margin-left: 10%;
margin-right: 10%;
padding-top: 5px;
overflow: hidden;
}
a
{
font-family: verdana, "times new roman", serif;
color: #000000;
font-size: 100%;
font-weight: normal;
}
a.download
{
font-size: 90%;
}
a.text
{
font-size: 90%;
}
a.menu
{
font-size: 100%;
}
a.page-menu
{
font-size: 100%;
font-weight: bold;
}
a.current
{
font-weight: bold;
}
a:visited
{
color: #606060;
}
a:hover
{
color: #9BB4BB;
}
img.title
{
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
}
img.fsf-banner
{
width: 120px;
height: 40px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
position: absolute;
}
img.main-preview
{
text-align: center;
display: block;
border-width: 1px;
border-style: solid;
border-color: #000000;
margin-left: auto;
margin-right: auto;
}
img.cep
{
margin:0px 0px 0px 0px;
border-style: none;
}
img.link-banner
{
padding: 2px;
border-style: none;
}
.bold
{
font-weight: bold;
}
p.bold
{
font-family: verdana, "times new roman", serif;
font-weight: bold;
font-size: 90%;
}
p.normal
{
font-family: verdana, "times new roman", serif;
font-weight: normal;
font-size: 90%;
}

If I get what you mean then you need to add a min-height to the container in FF, which will mean that the container div will not get smaller than that set height, but will stretch if it needs to.

Now because IE does not recognise min-height, you need a conditional statement in the header of your page to allow for IE to recognise it....

<!--[if IE]>
#container {
height: 600px; /* change to your value */
}
<![endif]-->

So there is no way to have the container stay "flexible" and only be as high as it needs to be on a smaller resolution, but still get bigger on bigger resolutions when there is more space to fill? Say, sometimes the container would only need to be 400 pixels high to show the actual content properly, but if I set the minimum height to that, it will not expand if there is no content to expand it. I'd rather have the empty space in the bottom be filled with more of the container than just the background (I'm viewing the page at a 1600x1200 resolution and half the height of the page is just background), but I don't want to set the minimum height to something like 1000 pixels because then for people viewing the page on smaller resolution there is unnecessary stretching of the page.

When the page was first viewed in Quirks mode, setting a height in % for the container used to work, but now that it's in Standards compliance mode, suddenly it stopped working. I've tried setting a bottom or a bottom margin value in % or pixels, but there is no change.
CSS 2.1 Working Draft, Section 10.5 (http://www.w3.org/TR/CSS21/visudet.html#propdef-height) states that for an element in the normal flow, a percentage height only applies if its containing block has an explicitly set height. That is why it isn't working in standards mode. A similar statement holds for the margin and padding properties.

In style sheets you often see this kind of stuff:

html, body {
height: 100%;
}

That is to ensure that a percentage will be working for a container nested within the body element.

With this knowledge I think you will be able to get your page to render the way you want.
Now because IE does not recognise min-height, you need a conditional statement in the header of your page to allow for IE to recognise it....
Yeah, but keep in mind that IE7 does support min-height. You should only feed IE 6 and below with that set of styles.

Thank you very much, that was a nicely simple solution and worked perfectly :) .