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....
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?
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?