100% height isn't working

Hello xxangel,
Have a look at http://www.nopeople.com/CSS/full_height_column/ and see if that doesn't help.

xxangel did you really not come across mention of the fact that you need height:100% on the html & body tags in any of those posts you found?

Excavator that linked layout suffers from the fact that height is fixed on the container for modern browsers and won't expand with content.

Hugo.

I saw height 100% on the body tags, but when I tried it, it didn't work (I didn't seem to have seen the HTML tag).

And, even though that does work with the 100%, the shadow still doesn't work (the left shadow).

Ooops! So it does. I never tried putting anything in it before.
I took it down till I can figure it out.

/* It's back up again... I think it works now!

Min-height excavator; height:100%; for soppy IE6 min-height for modern browsers. feed both on the element concerned but with a filtered child selector re-set for height to 'auto' or filter plain height:100% to IE6 only.

xxangel height is needed on the html tag as well.

Problem is here that you can only extend the first element to full height maybe try something like this:

body {
  width: 95%;
  margin: 0 auto;
  background:  url(lshadow.gif) 0 0 repeat-y;
  }
#wrap {
  width:90%;
  margin:0 auto;
  }

But you'll need to test that and play around with things.

Hugo.

I'm confused now...

Did you remove a link Excavator?

From what I saw your problem with the footer is down to the fact that your using position absolute to place it as well as a few other elements you also have a float and absolute together and you cant mix the two.

Hugo.

I tried your method, Hugo, except it didn't work out the way I wanted to. So, I created two more divs. But, the height problem is happening again. It isn't stretching:

http://yinten.com/test/

Wait, I just realized that wouldn't work if only the first element could be extended.

Then, could I place the two divs inside the div?

Are you sure that body method doesn't work? it seems to work for me if I set body to min-height:100%;height:auto width:93%;margin:0 auto along with the left gif. wrapper holding right gif.

I stand to be corrected though maybe I'm missing something obvious.

I did remove a link Hugo,
http://www.nopeople.com/DavidStokes/
I took it down because I didn't want to hijack the thread.

It validates and it seems to work with IE6, IE7 and FF2 on both Vista and XP.
The footer is still positioned absolutely though...

You wont get anywhere with absolute, the common method for a full height page is to place the footer outside the full height element ensure the footer has a fixed height px or em then you add a negative margin top the same value as height to the footer to drag it back onto the screen.

You were quite correct actually, this is tending to hijack xxangels thread, which I'm encouraging , sorry xxangel.

It's okay, thanks for the help.

The problem with that is that the page isn't centered anymore. And, if you center it (with the body as 95% and margin: 0 auto), the shadow on the left is a bit too right to be centered.

But, it's okay. I started another template that doesn't make use of the shadows or the height 100%. Thanks for all the help!