Sticky footer on a tabled layout?

HTML & CSS
1

Hi,

I run into a problem (IE only) when I was working on a tabled layout (I’m not given an option of doing it tableless) for a friend’s CMS dating site script (not that it matters to any of you, but just stating it so that I’m not bombarded with replies to use tableless markup). I know how to do this via tableless method, and I did figure out a way with the tables without additional markup, but it doesn’t work in IE.

TEST CASE 1: Test Case 1 link

Here there is a table #wrapper having 3 rows (tr) each of with having only one cell (td). Each of these accommodate #header, Content, and #footer tables which are of certain width. Here I want the footer to stick at the bottom of the window unless the content pushes it. In test case 2, I have achieved exactly that.

TEST CASE 2: Test Case 2 link

Here I have to set #wrapper to use up 100% height ok good, but now the cells span out. So, I add #wrapper td to have vertical-align: top. This is somewhat okay, but I want the footer area to be at the bottom. So, enter #footerarea - I apply it on the third row cell of #wrapper which contains #footer. Now I have to keep the content area just below the header like in test case 1, so I make a #contentarea id and apply it to second row cell of #wrapper which contains Content.

There you have it, a sticky footer which can be pushed if there are too much content on Content table, and without any additional markup just to achieve this effect. All good and well except in IE it doesn’t work - applying 100% height to #contentarea delivers a different result. Not surprisingly, in IE9 Preview - it’s behaving exactly like in Firefox, Chrome, Safari, and Opera.

Any suggestions greatly welcome! :slight_smile:

2

Hi,

Been there years ago and there is no real solution Im afraid.:slight_smile:

You can fix IE straight away if you trip quirks mode but we don’t want to go there do we.

You can also do it if you remove the header and footer and just use the table for the mid section.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}

html, body {height:100&#37;;}
body {font-family:arial, helvetica, sans-serif;}

#header {
    background:green;
    height:100px;
    position:relative;
    z-index:999;
    text-align:center;
    border-bottom:1px solid #000;
}
#outer {
    border-collapse:collapse;
    table-layout:fixed;
    width:100%;
    height:100%;
    margin:-101px 0 -61px;
    padding:0;
}

#outer td {
    padding:101px 8px 61px;
    vertical-align:top;
}

#outer .left {
    width:100px;
    background-color:red;
    border-right:1px solid #000;
}

#outer .center {
    background:#cdc;
}

#outer .right {
    width:100px;
    background:red;
    border-left:1px solid #000;
}

#footer {
    border-top:1px solid #000;
    background:green;
    color:#ff;
    height:60px;
    text-align:center;
}

</style>
</head>
<body>
<div id="header">Header</div>
<table id="outer">
    <tr>
        <td class="left">Left</td>
        <td class="center">Centre</td>
        <td class="right"> Right</td>
    </tr>
</table>
<div id="footer">Footer</div>
</body>
</html>

Strangely enough I went through all these years ago when someone complained that my 3 equal columns withs sticky footer was much easier in tables but when pressed no one could actually come up with a solution.

You should be able to overstate the height in a table and the table should adjust because that’s how they are supposed to work. Which means all you have to do is set the middle td to 100% high and it should work.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}/* for demo only */
html, body {
    height:100%;
}
table {
    height:100%;
    width:100%;
    table-layout:fixed;
}
td {
    border:1px solid #000;
    vertical-align:top;
    height:0;
}
.content{height:100%;}
.footer{height:3.5em}

</style>
</head>
<body>
<table>
    <tr>
        <td class="header">Test</td>
    </tr>
    <tr>
        <td class="content">Test</td>
    </tr>
    <tr>
        <td class="footer">Test</td>
    </tr>
</table>
</body>
</html>

However IE gets this wrong and add the 100% to the header and footer and becomes too high. It should recalculate the overstated dimension as other browers do but it doesn’t. If you trip quirks mode (add some comments above the doctype) then it starts working properly even though this is not a box model issue.

The only other solutions are moving the header and footer out of the table as already mentioned.

I’m not saying there isn’t another solution for Ie because you could probably hack some negative margin behaviour into the mix but there is nothing straight forward like other browsers are doing.

I know how to do this via tableless method, and

Which is is taken from my code (and even mentions my name).:slight_smile: