(CSS) Can this simple layout idea be better coded?

Question

Hi guys,
I'm trying to build a very simple layout made slightly more complex via a background gradient that needs to be in sync with the foreground image.
http://vilverset.com/murray.php
As you can see, the layout is supposing a 1000px wide viewport, or bigger. The foreground image is 650px wide, and the text column next to it is 350px wide. This fills up our 1000px viewport.
Now, normally, I would just apply the image as a background to the text column's container (and make that container 1000px wide), except that there are a few conditions to this layout that make that solution ill-advised.
When there's enough content to fill it, the text column needs to stretch from the top to the bottom of the viewport, and trigger the main browser vertical scrollbar when exceeding this window.
When there isn't enough content to fill the length of the column, the content should be vertically centered.
The image on the left of the column should be vertically centered at all times, or it will lose its sync with the site's background gradient.
The image on the left of the column should never scroll with the content. It should be fixated.
The combination of the image and column should be centered in the viewport (both axis).
You've seen how I did it @ the link above. Div class "image" has the main image as a background, and this image is padded to extend to fill the whole 1000px width of the site layout. It's the only way I could think of to offset the image from the center spot. Ditto the text column, which is in a 350px wide div, that has a 650px left side margin (totalling 1000px).
The main negative side-effect of this method occurs when you reduce the viewport to less that 1000px in width. The image starts moving AWAY from the column (as you can see by trying it out at the link above).
If there's a better way to get that image and that column into position, and the combination of both centered on the screen in both axis... I'm willing to try it!

Answer 1

I'm glad you're pleased with your layout.     I'm having a few problems with it.
When viewed on a narrow screen such as an iPhone in landscape mode, your image moves leftwards out of view.  And when device is scrolled horizontally to see content, text collides with the image.  Is this what you want to have happen? (see screenshot)
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb
mjyeager wrote:
You tell me these things can't be done, but I've got foreground JPGs with gradients perfectly in sync with the background gradient, and neither of them scrolls with the text content. So not only can it be done, I've done it. Right there, at that link I posted in the OP. And it works in all major browsers, including Safari on Mac.
I was just wondering if there was a BETTER way to do it. But if people are going to start telling me it simply can't be done, when the proof that it can is staring them in the face, then I guess I'll just count myself lucky that I achieved what I've achieved and stick with what I've got.