CSS emulating table design

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

CSS emulating table design

Post by alex.barylski »

I have a requirement to display a header a body and a footer. The footer and header are of fixed size but the body may change...

Currently I have something like this in tables:

<table width="100%" height="100%">
<tr><td>Header</td></tr>
<tr><td width="100%" height="100%">Body</td></tr>
<tr><td>Footer</td></tr>
</table>

If memory serves me correctly XHTML TRANS doesn't support TD height 100% nor does TABLE - so how would I make this work, other than maybe switching doctypes to html transitional?

Is this effect possible using CSS and DIV's only? Remember the footer needs to remain aligned with the bottom and only get pushed "down" when there is more BODY than can visibly be displayed???

It's important it's all wrapped in a container DIV or TABLE as well incase the footer is wider than the header I need all three rows to always share the same width...

Ideas? Demo code?
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Cool looks interesting :)

Thanks :)
Post Reply