100% table height HTML/CSS with XHTML Transitional

Toggle sidebar Toggle sidebar
L

letsgetsilly

Senior member
Oct 27, 2002
397
0
0
Hi all,

I have a very simple site! I am trying to implement a moo-tools javascript function to my main page, and in order to do so, I needed to change my doctype to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Problem is, now my 100% height tables fail to stretch. I need a simple header, body, footer setup. 1 column only. None of my tricks seem to work.

If you could check out my code and let me know what I can do to get things to stretch and footers to work, that'd be great! Thanks!
 
Snapster

Snapster

Diamond Member
Oct 14, 2001
3,916
0
0
Could you perhaps provide a visual representation of what you are after? With that code the table stretches to 100% height, but I'm guessing you want a fixed header and footer and have an expanding body?
 
S

skrilla

Senior member
Oct 22, 2004
833
0
71
Edit.. I guess code doesn't keep its format when you attach it anymore?

Also, is there a link to the site so we can use the images you are referring to? It would be easier to visualize what you are going for.

 
G

GoatMonkey

Golden Member
Feb 25, 2005
1,253
0
0
Can you do something like this instead? I'm not 100% sure exactly what you're going for, but my guess is a header area, horizontal nav, 100% height content area, and a footer.

This idea uses some overlapping stuff with z-index set. There is a full height div for the content with a z-index set behind the header and nav area, then the vertical spacer div is added within the full height div and is behind the nav/header area.



 
L

letsgetsilly

Senior member
Oct 27, 2002
397
0
0
Thanks for the replies everyone.

It is a shame that the code blocks don't maintain white space. This is going to be a problem. I will try out your solution today (goatmonkey) and see if I can get it working.

I'll try to also put up a sample website a little later to show you what I want, but yes it is simple header, horiz nav, content area, and the a footer that stretches to the bottom.

Here is a crude drawing:

<header>
<navigation>
<content>
-
-
-
-
<footer>

The content portion is just an image in this case, the trick is getting the footer to stretch to the bottom correctly in I.E., Firefox, and maintain the repeating image on the Y axis.


 
You must log in or register to reply here.

TRENDING THREADS

COMPANY
RESOURCES
FOLLOW
Top Bottom