td height 100%: possible?

[supercain]

Hi,

i have a code like this

HTML, BODY { margin:0;padding:0;height: 100%; }
TABLE { height: 100%; }

.row1 { height: 100px; }
.row2 { height: 30px; }
.row3 { height: 100%; }
.row4 { height: 20px; }
DOCTYPE transitional

<table>
<tr class='row1'><td>Header</td></tr>
<tr class='row2'><td>Menu</td></tr>
<tr class='row3'><td>Content</td></tr>
<tr class='row4'><td>Footer</td></tr>
</table> [/HTML]

what im trying to do is simple, a table that occupies the entire screen, header has to touch the top edge of the screen whilst the footer has to touch the very bottom. Content cell should auto size and stretch enough to fill the remaining space, but i cant get it to do it, the footer cell does it instead. How can i work out this problem? i tried by using height at 100% for the content row but it wont work in explorer. Any hints please?

Thanks.

[LiveCity]

Try not to use tables for layouts, DIVs written with CSS offer far more flexibility than tables.

[supercain]

Well, thanks for the advice but its a little too late for that since all the pages of my site have tables. Does it mean i cant achieve what im trying as long as im using tables?

[LiveCity]

I recall that tables are problematic in this regard. Perhaps this would be useful in that case.

[supercain]

Actually, i have already come across that site before coming here. You can see i used their advice in my code, but vertical alignment is not what im trying to achieve, but getting a particular cell to be the one that stretches and fills the remaining space, in this case bing row3 but what i get is footer cell being the one that stretches, which is odd considering im giving it a defined height (20px). Im sure there is a way around this, but i have tried many things and none of them work.


Thanks.

[LiveCity]

Sadly, from what I've found online, it seems that tables don't work that way, 'out of the box'. I've stumbled upon a solution that uses jQuery - so apparently there's need for an external script to get it working (which supports the notion that there's no such option in coding).

I believe that if possible, you should invest time in a non-tabular layout - it would be easier to maintain both now and in the future.

[supercain]

Thanks again, but that code is for the entire table, not for a single cell which is my goal. I already managed to have the table occupy the 100&#37; of the height of the page, the problem is the proportions of the cells. Rows 1, 2 and 4 are supposed to have a defined height, while row 3 should auto size accordingly depending on the page size, but row 3 does it instead.

[repeater09]

I would strongly use div tags like LiveCity said...they are WAYY easier to use then tables I only use tables for forms...also you could probably remake the whole site in div's before you found that problem with the cell you are talking about tables and &#37; do not play very nice together Ive heard of a hack to help fix this but I dont think it worked in IE

[repeater09]

I would strongly use div tags like LiveCity said...they are WAYY easier to use then tables I only use tables for forms...also you could probably remake the whole site in div's before you found that problem with the cell you are talking about tables and % do not play very nice together Ive heard of a hack to help fix this but I dont think it worked in IE

[supercain]

I already fixed it. Seems like i had some misplaced cells after all. Thanks anyway.