Two column layout with only one column scrollable

Question

I need to create a two column layout where:

1. Left column has an image which fills the entire area;
   The content in this column is not scrollable.

2. Right column has text and images. The content of this column is scrollable when it is long.

So when I move the browser scroll bar the right content moves but the image on the left column stays always the same and filling the entire area.

Is this possible?

This is what I have at the moment:

body{
  margin: 0;
  padding: 0;
}

.left, .right {
  float: left;
  width: 50%;
}

.left img {
  height: auto;  
  max-width: 100%;
  outline: 0; 
}

<div class="left">
  <img src="image.jpg" />
</div>
<div class="right">
  <p>Long content</p>
</div>

Answer 1

Use position:fixed for the left div and padding-left:50% for the right div.

Fiddle: http://jsfiddle.net/3phfgsxj/4/