HTML/CSS 100% height issue related thing....

[bluemicrobyte]

On this page:

http://family.hope968.com/register.php (don't touch the forms, they aren't finished)

You'll notice
A) A column (table w/ bg image) on the left and right sides of the page
B) A "footer" ish table/image along the bottom of content, but not the bottom of the browser.

I'm trying to extend the "footer" table as well as the two side column tables so that the footer is nicely lined up with the bottom of the page IF the center content doesn't extend the footer to the bottom of the browser window. If the center content DOES go past the bottom, then the footer should extend as well (it already does this).

I tried using various methods to make a table with height 100% but that resulted in the footer always displaying below the bottom of the browser window (resulting in scroll, even if the center content only filled half the page).

Help is appreciated, thanks!

[Neo]

You might try googling css height or css hieght 100%

Its one of the CSS problems, that I've no idea why the hell they didn't include, ut it bothers me to no end.

I think if you add "height: 100%" to both the body element, and the table element/column, that might work.

-Neo

[bluemicrobyte]

Result:

http://family.hope968.com/template.html

Notice:
-Page extends BEYOND 100% of the height......
-Tiny white/empty/margin border on the right side of the page

[Neo]

Its extending beyond the height of the window because of the nav header thingy (its actually minimum 100% height of the window) ... or whatever.

If you want more control, I would suggest browisng through alistapart, I think they might have an article on this or something.

As for a tiny white empty margin, I don't see it O_o.

Oh, and uhm, you might want to check your template in IE. There is some funky stuff going on.

You might want to lookup the Holy Grail (http://www.alistapart.com/articles/holygrail) and switch from the table based layout completely.

-Neo

[bluemicrobyte]

I've fixed the IE issue in a newer version of the template, and setting that middle table height to 75% height is an acceptable temporary fix.

I think I'm going to save learning CSS layouts for my next website project as I've already spent time perfecting the tables on this one =P

Updated template: http://family.hope968.com/events.php


(Would there be a way to wrap the entire page in one table with a height of 100% and have the middle table fill whatevers left after the header and footer?)

[Neo]

Yessir. I used to do that often. Which is why I prefer divies now.

-Neo