Independently scrolling div columns with images that extend beyond div width?

I'm trying to create a page with two columns of images that scroll independently. I've built a simple two-column div layout with each column floating with 50% width and 100% height. The overflow is set to auto, so the content scrolls independently, but images wider than the container are cut off within the div.

Is there any way to achi开发者_如何学JAVAeve such an effect where the divs scroll independently and are able to have images that extend beyond the container? Or is there perhaps another direction to pursue?

Thank you!

-- Edit: Image for better explanation

What I mean by the overflow cutting off is that images wider are essentially cut off at the scrollbar, what I'm trying to achieve can be seen in this image, with each column being able to scroll independently ( I suppose with the mousehweel):

The answer you'd think would work is:

overflow-x: visible;
overflow-y: scroll; /* or auto */

But this doesn't appear to function like you'd think/hope. See this page for a grid of all possible overflow x/y combinations:

http://www.brunildo.org/test/Overflowxy2.html

So - I believe the answer is you'd have to:

1) give each box a height
2) give each box overflow-y:scroll; /* or auto */
3) use css positioning to place the boxes where you want

That should a) have the boxes in the correct place, but b) allow them to be side by side without a set width, and without needing float (which you can't get a consistent result w/out a set width in this case)

This would also have each box just auto-fit the width of the images, therefore they won't be cut off horizontally, but will still scroll vertically.