Date: 10/11/07 (WebDesign)    Keywords: browser, css, web

I have a webpage I'm building where the background has one color, and the content, offset from the center, has a different color behind it.

My content is dynamic, so I can't specify different CSS classes based on the page.

For long pages, I need the background colors to reach from the top of the browser to the bottom... simple, add a "min-height" to the body and let the color stretch with the content on the child div.

But if I want to have this same set-up on short pages, the min height will stretch the bodys color but the childs background color stays short and just around the content. If I change the bodys and child to height:100%, it'll work, but the color will stop on long pages where you have to scroll. And apparently you can't nest min-heights, to have both body and child have a minimum height of 100%.

I tried doing the "faux-columns" effect by adding a repeating background image to the body which would have a min-height 100% added. But the problem is my content is offset from center, and I can't position (I think) offset from center.

I've also tried not defining heights anywhere but the child div, and have the child div have a min-height:100%, but that apparently won't expand the parent elements.

I feel like I'm missing something simple. Help!

Source: http://community.livejournal.com/webdesign/1320858.html