Full-height CSS layout, with multiple columns

Question

I have a layout that is working, but it has one very annoying problem.. when the content is taller than the screen, the background stops.

This is the desired layout

Answer 1

Got there in the end with this one, but had to make a few changes to your markup and the images.

1. Remove the #left and #right divs.
2. Make a new single background image that's 592px wide, transparent background and has the gradients at the left and right of it - a 1px high image with left gradient - transparent section 504px wide - right gradient.
3. Add the logo to the #wrapper, just before the #middle

So the markup looks like this now:

    

        
        

        ... etc ...
        
    

Then, the relevant changes in the stylesheet are:

#wrapper{
    height:100%;
    width:805px;
    margin-left:auto;
    margin-right:auto;
    text-align: right;
}

#middle {
    width:504px;
    padding: 0 44px;
    margin: -154px auto 0 auto;
    background:#000 url(new_bg.png) repeat-y top left;
}

Looks fine to me.

Only tested in in FF3 and Opera (running Linux without access to Windows / Mac atm) but I don't think there should be any big issues with it in IE / Opera.