Menu
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;
}
416
After spending a few days on this question, it seems that for this specific layout (especially the 100% height), using tables is the best option. Those 3 different threads with different twist of the question were unable to get results (so I suspect that this IE bug is one reason to keep using tables in 2014):
IE 10 bug with display table CSS when height is 100%?
Header/Footer Layout with 100% Content Height in IE8
Tableless Table Layout in IE8
By reading more about tables and SEO, I was also unable to find any relevant information or tangible data that using a single table would have any impact at all. The only tangible information I was able to find is that tables will only display once the full HTML has been downloaded in the client. Which again is not a big issue in 2014 considering the HTML's size in the overall size of a web page. CSS can be used for all of the table's style which solves some of the other complains I saw about tables. This article probably reflects best the situation here:
http://olav.dk/articles/tables.html
Tables in 2014 might be ok :)
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
