How do you default an image's right edge in a CSS Overflow DIV?

Question

I have the following on a page:

<div style="max-width: 600px; overflow-x: scroll;">
  <a href="PoolPanoramaBig.jpg" target="_blank">
    <img src="PoolPanoramaBig.jpg" style=""/>
  </a>
</div>

If the image is wider than 600px then you can scroll the image to the left to see the rightmost part. However, I want to default it so that it is already scrolled fully to the left when initially displayed.

I've tried setting a style in the image to float:left which works but that disables the horizontal scrollbar.

Ideas?

EDIT: Here's a page that might help explain what I'm trying to do: http://guyellisrocks.com/ie-example/ Do you see how you have to move the scroll bar to the right to see the right most edge of the image? I'd like it to default to that when you first hit the page.

I don't have a problem doing this in JavaScript and if that's possible some hints would be appreciated. Otherwise if it's possible to do this with CSS then this is how I would first attempt to do this.

Answer 1

Try adding an anchor to the right of the image. Something like:

<img src="foo.jpg"><a name="right_of_image"></a>

When or after navigating to the page, if you append the #right_of_image anchor to the document URL, the browser will try to focus on the anchor, effectively scrolling to the right edge of the image. This probably won't work if you're using a scrolling container like the one you have, but should work if the image is directly embedded in your page. Does this work for you?