I am having some trouble with the code linked below. It looks great in Google Chrome and IE9, but not so good in IE8. Does anyone have any suggestions on how to make it display properly in IE8? I want to maintain a 3-column layout with a fixed middle column and fluid/liquid/flexible side columns that also fill the vertical space to 100% of the browser window height.
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>title here</title>
<style type="text/css">
.header {
display: table;
width: 100%;
height:100%;
text-align:center;
}
.header > div {
display: table-cell;
vertical-align:top;
}
.col {
width:20%;
}
#rightcol {
width:10%;
background-image:url('http://quetico.info/images/topo.png');
}
#leftcol {
width:10%;
background-image:url('http://quetico.info/left.jpg');
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
}
#midcol {
background:#d0eadd;
/* ffff8b; */
padding-top:55px;
}
</style>
</head>
<body>
<div class="header container">
<div id="leftcol" title="portage photo by Hans Solo"></div>
<div id="midcol" class="col col-2">
<div id="divLeftInd">some text here</div><!-- ######## end of divLeftInd ##### -->
</div><!-- ####### END OF DIV FOR midcol -->
<div id="rightcol"></div>
</div><!-- ####### END OF DIV FOR header container -->
</body>
</html>