Is there as way to replicate exactly this layout without table (using CSS and divs only, no Javascript) in IE8:
http://jsfiddle.net/u0u7snh6/2/
I've tried multiple scenarios and IE8 seems to be either messing:
- Height of the content cell
- Either there height doesn't use 100% of the space available
- Either the height uses more than 100% and cause overflow that cannot be removed
- Alignment of the content cell
The word exactly is very important here... anything other than this layout will not work and IE8 is mandatory.
Otherwise, is using tables for layout a big deal in 2014?
Here is the simple code:
HTML
<body>
<table id="contentFrame">
<tr style="background-color: pink;">
<td> </td>
<td id="contentCol">
This is the header
</td>
<td> </td>
</tr>
<tr id="contentRow">
<td></td>
<td id="contentCell">
This is the content
</td>
<td></td>
</tr>
<tr style="background-color: yellow;">
<td></td>
<td>
This is the footer
</td>
<td></td>
</tr>
</table>
</body>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#contentFrame {
width: 100%;
height: 100%;
border-spacing: 0;
border-collapse: collapse;
empty-cells: show;
}
#contentRow {
background-color: green;
}
#contentCell {
height: 100%;
vertical-align: middle;
background-color: white;
}
#contentCol {
width: 80%;
}
