[b v]

On this page , the text within the div class "content" 's height extends the page's height. The two outer div's "left" and "right" (gradients) are set to 100% height, but do not stretch the entire page like they should. I've set the body height to 100%, but no luck. Any ideas?

[cam]

You'll be wanting Faux Columns then.

http://alistapart.com/articles/fauxcolumns/

[b v]

Thank you for posting that Cam, but after implementing that method, the same problem is occuring. The vertically tiled bg image is set to stretch 100% height. However, it doesn't because of the content height. Im really stuck on this.

[pgo]

It's even worse when you resize the browser window.

Remove all the "height: 100%;" stuff. Not needed. Apply the background-image to body instead of #page.

Center your page the easy way:

body {
  text-align: center;
}

#page {
  width: XXXpx;
  margin: 0 auto;
  text-align: left;
}

Voila!

I'd do away with absolute positioning. It's all fecked up in IE.

[b v]

pgo you rock. so was #page not stretching properly? I wonder why.

[pgo]

Dunno. I've tried the same thing - using height: 100%; all over the place. It doesn't seem to do anything...so I never use that property - only fixed heights. height: 50px; etc.

I think it probably has to do with the fact that "height: 100%;" is relative - that is, 100% of parent height. And height is by default fluid (as is width), so if you just keep declaring "height: 100%;" it doesn't really have anything to compare to.

Something like that.

[b v]

nvm