CSS emulating table design

JavaScript and client side scripting.

Moderator: General Moderators

CSS emulating table design

Postby alex.barylski » Fri Feb 02, 2007 5:54 pm

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?
alex.barylski
DevNet Evangelist
 
Posts: 6259
Joined: Tue Dec 21, 2004 6:00 pm
Location: Winnipeg

Postby nickvd » Fri Feb 02, 2007 6:00 pm

nickvd
DevNet Resident
 
Posts: 1027
Joined: Thu Mar 10, 2005 6:27 pm
Location: Southern Ontario

Postby alex.barylski » Fri Feb 02, 2007 9:54 pm

Cool looks interesting :)

Thanks :)
alex.barylski
DevNet Evangelist
 
Posts: 6259
Joined: Tue Dec 21, 2004 6:00 pm
Location: Winnipeg


Return to Javascript

Who is online

Users browsing this forum: fqwnbekur, Majestic-12 [Bot] and 2 guests