How do I get 100% height columns in both IE and FF?

Ok, I've got a layout I'm trying out. The problem is that I want my footer to appear at the very bottom of the screen, thereby giving my two columns 100% height. It's not happening in IE7, FF1.5.0.7, nor is it happening in Opera 9.

Here's a link to the webpage...http://www.oasisgamingusa.com/testlayout/index.php

Here's my css file...
/* Stylesheet for Oasis Gaming USA website */
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
font-size : 100%; /*Enable font resizing in IE*/
background-color: #ffffff;
color : #000000;
text-align : justify;
font-family : Verdana, Arial, sans-serif;
}
html>body {
font-size: 9pt; /*Resets font size for non-IE browsers*/
}
h1 {
font-size: 1.3em;
}
h2 {
font-size: 1.2em;
}
h3 {
font-size: 1.1em;
font-weight: normal;
text-align: center;
display: block;
}
p {
margin : 5px 10px 10px 10px;
padding : 5px;
clear : both;
display : block;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: right;
}
#menu li {
float: left;
position: relative;
width: 10em;
}
#menu li ul {
display: none;
position: absolute;
}
#menu li>ul { /* resets top and left for non IE browsers */
top: auto;
left: auto;
}
#menu li:hover ul, li.over ul {
display: block;
background-color: #15483a;
}
#menu a, #menu a:active, #menu a:visited {
width: 9.5em;
padding : 0 0 0 .5em;
color: #d2bc2d;
text-decoration : none;
font-weight: bold;
font-size: 1em;
display: block;
}
#menu a:hover {
text-decoration : none;
background-color: #d2bc2d;
color: #15483a;
}
#page {
margin: 0 auto;
padding: 0;
width: 90%;
min-height: 100%;
background-color: #ffffff;
}
#header {
margin: 0 auto;
padding: 0;
width: 100%;
height: 168px;
}
#logo {
margin: 0;
padding: 0;
width: 159px;
height: 102px;
position: absolute;
top: 5px;
left: 80px;
display: block;
background: #ffffff url(../images/Oasis-Logo2.gif) center no-repeat;
z-index: 100;
}
#menu {
margin: 90px 0 0 0;
padding: 5px;
width: 1000px;
height: 15px;
background-color: #15483a;
position: absolute;
z-index: 90;
}
#content {
margin: 0;
padding: 0;
width: 70%;
min-height: 100%;
float: left;
border: 1px solid red;
}
#right {
margin: 0;
padding: 0;
width: 25%;
min-height: 100%;
float: right;
border: 1px solid blue;
}
#footer {
width: 100%;
height: 26px;
margin: 10px 0 0 0;
padding: 0;
clear: both;
font-size: .8em;
background-color: #15483a;
color: #d2bc2d;
}
.copyright {
margin: 0 0 0 5px;
padding: 0;
position: relative;
top: 5px;
}
ul#footnav {
margin: -5px 0 0 0;
padding: 0;
list-style: disc;
float: right;
}
ul#footnav li {
float: left;
position: relative;
width: 8em;
}
ul#footnav a, ul#footnav a:active, ul#footnav a:visited {
width: 8.5em;
padding : 0 0 0 .5em;
color: #d2bc2d;
}
ul#footnav a:hover {
text-decoration : none;
}



Any help would be greatly appreciated. I know that IE doesn't recognize min and max values but for some reason firefox doesn't seem to be recognizing them either for me at the moment.

Thank you

Try this
html, body {
margin: 0;
padding: 0;
width: 100%;
font-size : 100%; /*Enable font resizing in IE*/
background-color: #ffffff;
color : #000000;
text-align : justify;
font-family : Verdana, Arial, sans-serif;
height:100%;
}
html>body {
font-size: 9pt; /*Resets font size for non-IE browsers*/
}
h1 {
font-size: 1.3em;
}
h2 {
font-size: 1.2em;
}
h3 {
font-size: 1.1em;
font-weight: normal;
text-align: center;
display: block;
}
p {
margin : 5px 10px 10px 10px;
padding : 5px;
clear : both;
display : block;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
float:right;
}
#menu li {
float: left;
position: relative;
}
#menu li ul {
display: none;
position: absolute;
}
#menu li>ul { /* resets top and left for non IE browsers */
top: auto;
left: auto;
}
#menu li:hover ul, li.over ul {
display: block;
background-color: #15483a;
}
#menu a, #menu a:active, #menu a:visited {
width: 9em;
padding : 0 0 0 .5em;
color: #d2bc2d;
text-decoration : none;
font-weight: bold;
font-size: 1em;
display: block;
text-align:center;
}
#menu a:hover {
text-decoration : none;
background-color: #d2bc2d;
color: #15483a;
}
#page {
margin: 0 auto;
padding: 0;
width: 90%;
min-height: 100%;
background-color: #ff0;
position:relative;
}
#header {
margin: 0 auto;
padding: 0;
width: 100%;
height: 168px;
}
#logo {
margin: 0;
padding: 0;
width: 159px;
height: 102px;
float:left;
margin-top: 5px;
margin-left:40px;
display: inline;
background: #ffffff url(../images/Oasis-Logo2.gif) center no-repeat;
z-index: 100;
}
#menu {
margin: 90px 0 0 0;
padding: 5px 0;
height: 15px;
background-color: #15483a;
position: absolute;
z-index: 90;
width:100%;
left:0;
}
#content {
margin: 0;
padding: 0;
width: 70%;
min-height: 100%;
float: left;
border: 1px solid red;
}
#right {
margin: 0;
padding: 0;
width: 25%;
float: right;
border: 1px solid blue;
}
#footer {
width: 100%;
height: 26px;
margin: 10px 0 0 0;
padding: 0;
clear: both;
font-size: .8em;
background-color: #15483a;
color: #d2bc2d;
position:absolute;
bottom:0;
left:0;
}
.copyright {
margin: 0 0 0 5px;
padding: 0;
position: relative;
top: 5px;
}
ul#footnav {
margin: -5px 0 0 0;
padding: 0;
list-style: disc;
float: right;
}
ul#footnav li {
float: left;
position: relative;
width: 8em;
}
ul#footnav a, ul#footnav a:active, ul#footnav a:visited {
width: 8.5em;
padding : 0 0 0 .5em;
color: #d2bc2d;
}
ul#footnav a:hover {
text-decoration : none;
}

You won't be able to get the columns to go 100% height. You'll have to use the faux columns approach. http://www.alistapart.com/articles/fauxcolumns

Thank you _Aerospace_Eng_, that looks a lot better except for one tiny detail. For some reason the logo is appearing beneath the menu bar. I thought that if it had a higher z-index it would appear on top but maybe the display: inline; is messing it up. What do you think? If I can figure that part out then I'm good.

Thank you for your help on this. I'm still trying to learn CSS as you can probably tell.

You want the logo to appear over the nav? Update the changes please.

Sorry about that. I was testing on my personal machine. I've updated the original testlayout website with the new changes that you suggested I make.

Have any ideas why the logo isn't appearing on top of the menu bar?

Thanks

Add this to your logo CSS
position:relative;

Thanks! That did the trick. I appreciate all the help.