• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

100% table height HTML/CSS with XHTML Transitional

L

letsgetsilly

Senior member
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!
 
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?
 
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.

 
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.



 
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

Back
Top