Making sure HTML div goes to the bottom of the screen.

Question

I currently have a site that uses a two-tone background image that is centered on the page. On top of the background I have a div that is cenetered as well, so that the background on the left and right sides of my content are different.

However on a few pages where the content is shorter than the screen length, it leaves an ugly stripe where the background is visible because the content doesnt stretch to the bottom.

---------------------------------------
|       |                  |          |
|       |                  |          |
|       |    Content       |          |
|       |                  |          |
|       |__________________|          |
| ugly bg        |                    |
| stripe   ----> |                    |
|________________|____________________|

Im sure theres a way to fix this that wont require me re-writing the entire site, but I'm having trouble figuring it out right now.

My background position is set to center repeat-y, so I cant offset it by 1/2 the fixed width of my div.

Basically I need to figure out how to stretch my content to the bottom, or a way to slide my background over to the end of my content.

Any ideas?

Answer 1

If your content area is of fixed-width, the cleanest solution to this problem would be to look at it from a different angle and introduce the background color of the content area into the body's background-image.

The article about faux columns on A List Apart has a similar trick.