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!!