I found some code from a forum for a CSS layout that would keep div heights at 100%, which was a problem that I was unable to solve on my own. I took the code (I don't remember where I found the original code) and modified it some to suit my needs. When I added the overflow: auto; property to a div, and added code to make it wider than the allowable width, it worked in IE but not in NN, and I have no idea why. In NN it just stretched the left div wider to accomodate the content. I have used this before, with no problems. My only guess is that it might be something that was in the original code I started with. However, there are some things in there that I have not seen before and don't know what exactly they are doing. The code I am using is below....

Code:
html, body {
	height: 100%; 
	width: 100%; 
	margin: 0; 
	padding: 0; 
	border: 0;
} 

.mainContent { 
	position: relative; 
	display: table; 
	width: 100%; 
	margin: 0; 
	padding: 0; 
	border: 0; 
	clear: both; 
	border-spacing: 0; /* required by Opera 6 */ 
} 

/* hide this from opera6 */ 
head:first-child+body div.mainContent {
	height: 100%;
} 

/* IE/Win required so floated tablecells take the height 
and overcome the display for IE/Mac */ 
* html .mainContent {
	display: block; 
	height: 100%;
} 

.container {
	display: table-row;
} 

* html .container {
	display: block;
} 

.column{ 
	display: table-cell; 
	border: 0; 
	padding: 0; 
	margin: 0; 
	/*padding-top: 100px;*/ /* space for the header */
	/*padding-bottom: 30px;*/ /* space for the footer */
	vertical-align: top; 
	min-height: 100%; /* opera6 needs min-height but moz/IE needs height */ 
} 

/* hide this from opera6 */ 
head:first-child+body div.column {
	height: 100%;
} 
/* added for mozilla which worked for others too, 
but op6 still needed min-height so hide this rule */ 

/* for IEwin/mac Only to override display: table-cell; */ 
* html .column {
	display: block; 
	float: left; 
	height: 100%;
} 

.left { 
	width: 30%; 
	min-width: 250px;
	background : #EEEEEE;
	position: relative; 
	border-right: 2px solid #999999; 
	/*z-index: 5; */
	overflow: auto;
} 

.right { 
	width: auto; 
	background: transparent; 
	position: relative; 
	border-left: 2px solid #999999; 
} 

#header { 
	padding: 0; 
	margin: 0; 
	/*position: absolute; */
	position: relative;
	top: 0; 
	left: 0; 
	background-color: #CCCCCC; 
	width: 100%; 
	height: 100px; 
	color: #fff; 
	/*z-index: 10; */
	border-bottom: 4px solid #999999; 
	margin-right: -15px; /* see ie/mac hack below */ 
} 

/* to correct an IE/Mac issue -15px positioning bug */ 
/* the following is invisible to IE Mac : note id selector must be used */ 
/* commented backslash hack v2 \*/ 
#header {
	margin-right: 0px;
} 
/* end hack */ 

#footer { 
	clear: both; 
	/*margin-top: -30px; */
	width: 100%;  
	color: white;
	background: #CCCCCC;
	border-top: 4px solid #999999;
	/*z-index: 100; */
	min-height: 30px; /* IE needs height though */ 
	position: relative; /* required by OP6 but correct value fed re hack below */ 
} 

/* hide this from opera6 */ 
head:first-child+body div#footer {
	/* position: absolute; */
	position: relative;
} 

* html #footer {
	height: 30px; /* added to overcome content overflow min-height rule */
}


<body>
<div id="header"> Header </div>
<div id="mainContent" class="mainContent"> 
  <div id="containter" class="container"> 
    <div id="left" class="column left"> 
      Left Column - overflow: auto; is not working here
    </div>
    <div id="right" class="column right"> 
      Right column
    </div>
  </div>
</div>
<div id="footer"> Footer </div>
</body>
Can anyone help me to figure out what I am missing?