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

[Paithar]

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

[_Aerospace_Eng_]

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

[Paithar]

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.

[_Aerospace_Eng_]

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

[Paithar]

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

[_Aerospace_Eng_]

Add this to your logo CSS

position:relative;

[Paithar]

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