Trouble with div columns and height

I have the following layout:

<div id="header"> 
  Header code
</div>
<div id="containter"> 
  <div id="left"> 
    Left column code
  </div>
  <div id="right">
    Right column code
  </div>
</div>
<div id="footer"> 
  Footer code
</div>

I am trying to make both of the divs in the container div a minimum of 500px high, but if the content of either the left or right div is greater than 500px, then I want them both to stretch to the size which will accomodate the content that is greater than 500px. In effect, I only want a horizontal scroll bar to appear in either one of those divs, if necessary, and not a vertical one. Can this be done?

I need this to work in both NN and IE.

I am using the following CSS:

#header {
	width: 100%;
	padding: 5px;
	margin-bottom: 5px;
	background-color: #CCCCCC;
}

#container { 
    width: 100%;
}

#left {
	width : 30%;
	min-width: 250px;
	height: 95%;
	height: 500px;
	float : left;
	background : #EEEEEE;
	padding: 5px;
	overflow: auto;
	border: 2px solid #999999;

}

#right {
	width : 67%;
	height: 95%;
	height: 500px;
	float : right;
	background : transparent;
	padding: 5px;
	overflow: auto;
	border: 2px solid #999999;
}

#footer {
	width: 100%;
	clear: both;
	margin-top: 5px;
	padding-left: 5px;
	padding-top: 10px;
}

Thanks in advance for your help.