Is there a way to replicate exactly this layout without a table (using only CSS and divs, without Javascript) in IE8 :
http://jsfiddle.net/u0u7snh6/2/
I tried several scripts and IE8 seems either messy:
- Content cell height
- Or the height does not use 100% of the available space
- Or the height uses more than 100% and causes an overflow that cannot be removed.
- Content cell alignment
The word is definitely very important here ... nothing but this layout will work and IE8 is a must.
Otherwise, use tables for layout in 2014?
Here is a 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%; }
source share