The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Taking up 100% page height

I have developed a template that I like, and everything seems to work in both IE and firefox, except that I can't figure out how to make it stretch to take up the full height. http://75.185.5.253/portfolio/ is the location. {{{{HERE}}}} is the area I can't seem to stretch out, if anyone can figure it out or give me some pointers that would be great.

It's already set to 100&#37; height for both, if you take a look in portfolio.css.

This does basically nothing in FF, and in IE 6 it extends it beyond a single page scroll.I just want to ensure that my footer always gets pushed to the bottom of the page. If I have enough content it looks great, but when I don't have that much content it doesn't extend

Well as you are using the old method of tables for layout then I guess Ie6 would probably like the old doctype also.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

That will fix the page straight away but leave you in quirks mode which is not advisable.

If you want to move away from tables then the FAQ on 100&#37; height (and the one on putting a footer at the bottom) explains how to do this without using tables. There are also examples in the 3 col sticky thread at the top of the forum.

If you must use tables then the only way I know of doing something like this in IE6 in standards mode is to use the same method that I used for the footer technique and relies on having a fixed height header and footer.

I just removed that background image and I made a different one. I used the background on #outer for the left one, then put a floating bar for the right one. It now looks almost the exact same in all of the following: Firefox 2.0.0.7, IE 5.55, IE6, and IE7. In IE5.0 the PNG transparency hack doesn't work, and in both 5.5 and 5.0 there's a small gap either above or below the right border, but overall I'm very happy. Thanks for all your help guys, not only is it much cleaner but it has a smaller size thanks to your guidance. I appreciate all the help. Now to figure out how to test it on a Mac without actually using a Mac...