I tried for 3 days to avoid using the table in my new responsive design, mainly because everyone says they are evil. On the other hand, while doing more SEO and spreadsheet research, some people even say that it improves their visibility.
In any case, the semantics are much nicer with divs and HTML5, so I would really like this next example to work. The main problem is that in IE9 and 10, the "partition line" will overflow due to a value of "100% height". All other browsers seem to be responding very well.
Does anyone know how to solve this (ideally without Javascript?):
JSFiddle: http://jsfiddle.net/fvqvdske/1/
Full-size page for testing in IE10 mode: http://jsfiddle.net/fvqvdske/1/show
The only problem is overflow and IE9, 10 - the middle line should fill all the space left from the header and footer (and the header and footer should be able to adjust the height to adjust their contents dynamically, for example, fixed, absolute positions).
HTML
<body> <header role="banner"> <div> <div> This is the top banner </div> </div> </header> <section role="main"> <div> <div> <div> <div> <div style="border: 2px solid red;"> This is the content<br/> This is the content<br/> This is the content<br/> This is the content<br/> This is the content<br/> </div> </div> </div> </div> </div> </section> <footer role="contentinfo"> <div> <div> This is the footer </div> </div> </footer> </body>
CSS
html, body { height: 100%; width: 100%; margin: 0; padding: 0; } body { height: 100%; width: 100%; display: table; position: absolute; border-spacing: 0; border-collapse: collapse; } header, footer, section { display: table-row; text-align: center; vertical-align: middle; height: 1px; } header > div, section > div, footer > div { display: table-cell; vertical-align: middle; } header > div > div, section > div > div, section > div > div > div, footer > div > div { max-width: 400px; width: 100%; margin: auto; background-color: brown; } section, section > div, section > div > div, section > div > div > div, section > div > div > div > div { box-shadow: inset 0 1em 1em -1em #222, inset 0 -1em 1em -1em #222; height: 100%; vertical-align: middle; } section > div { display: table-cell; width: 100%; height: 100%; } section > div > div { display: table; margin: auto; } section > div > div > div { display: table-row; } section > div > div > div > div { display: table-cell; } section { } header { background-color: pink; } section { background-color: yellow; } footer { background-color: orange; }