Problem with background borders

Hi,
I'm creating a page where I want a centered main container of 960px width with a 10px gradient border on each side. (Se example at http://www.hem.skyrev.se/).

At first I made a 980px wide 1px high image with repeat-y as background for the container. The problem was that I would sometimes get a 1px gap between the border and the content because the content centered slightly different than the image.

I don't want to use border-image because I don't think it works with IE. So I created one left-div and one right-div, which you can see at the linked page, with individual background images. Here's my dilemma now: I want the borders to fill the window size completely. So I set container height: 100%. It looks great when I load the page but if my window is small and I scroll down the border ends right there. I thought I'd solve this with background-attachement: fixed so that the borders would no scroll with content. But this doesn't work at all since the image is positioned relative to viewport rather than the div.

My current solution is to hardcode the height of the container to 1500px making sure it's never too small - but it's not a good solution.

How would I solve this? I want a background border on each side of the container, which centers uniformly and fills up the window height and continues to do so if I have to scroll down.

Since you are using a fixed width to #main-container, it's very easy.

Combine the two side backgrounds into a single horizontal strip with these two images at either ends. The image should have a width>980px and you'd need to set some left&right padding to #main-container

Thanks for your advice. I thought I did this originally but now that I think of it I might have had the background applied to body rather than the container. So I belive this should work.

Ok, I've tried your suggestion and it kind of helps but my problem is essentially the same. If I set the content's height: auto the border will end abruptly if the window is larger than the content. But if I set height: 100% it will end abruptly when I scroll down if my window is too small.

I suppose I need to javascript an if-statement creating different styles depending on the window size. I'd prefer not having to do this so if there's another way please let me know.

Forgot to mention, to expand the container div to the maximum height, you need to initially set height:100%; to both body and html selectors. After that, set min-height:100%; to the container.

PS: Lower version of IE may not accept min-height. But, you may specifically set height:100%; to overcome it, if required.

Works perfectly now! Many thanks!