position content relative to a fluid width element set to position:fixed

Question

I have a layout with the following requirements

• An image on the left side, and content on the right side.

• The image is pinned to the bottom left of the viewport

• The image does not move when the user scrolls

• The image resizes to 100% height of the viewport, up to it's max height. (I don't want the image to distort in it's attempts to be larger than it actually is)

• The image retains it's aspect ratio, and resizes it's width according to the height resizing.

• The content begins to the right of the image, and moves as the image resizes with the browser viewport.

Now, I've managed to achieve pretty much all but the last of these requirements.

Have a look here:

http://letteringmusic.com/

The image resizes quite nicely, but I can't get the content to float next to the image because image is position:fixed, and therefore out of the document flow.

I'm not opposed to a javascript solution if that's the only way to get the result I want.

Anybody know what I need to do to make this work?

Thank you!!

Answer 1

A quick (and perhaps only) solution is to restyle the content when the browser window resizes (using the window.onresize event). In that function you should read the width of the background image:

var bgWidth = getElementById('background-img').style.width;
getElementById('content').style.left = bgWidth;

and use #content { position: absolute }. I know this introduces another problems, but I think you can bypass them. It's not the most neat solution, as Javascript must be enabled (and the event will be fired a lot when someone resizes this window), but it should work.