I've been trying for 3 days to avoid using table in my new responsive design, mostly because everyone says they are evil. On the other hand while doing more research on SEO and table, some people even say it improves their visibility.
In any case, the semantic is much nicer with divs and HTML5, so I would really like to have this following example working. The main problem is that in IE9 & 10, the "section row" will overflow because of the 'height 100%' value. All other browsers seems to be reacting fine.
Does anyone know how to solve this (ideally without Javascript?) :
JSFiddle: http://jsfiddle.net/fvqvdske/1/
Fullsize page to test in IE10 emulation mode: http://jsfiddle.net/fvqvdske/1/show
The only problem is the overflow and IE9, 10 - the middle row needs to fill all the space left by the header and footer (and the header and footer needs to be able to adjust height to fit their content dynamically e.g. no fixed, no 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 {
}
/* temp */
header {
background-color: pink;
}
section {
background-color: yellow;
}
footer {
background-color: orange;
}
