CSS: Horizontally scrolling image inside variable width div?

I have...

<div id="tabs">
  <!-- ... -->
  <div id="interior-photo">
    <img src="...">
  </div>
  <!-- ... -->
</div>

... and ...

#interior-photo { overflow-x: auto; }

Basically, I have a page broken down into a main section and a fixed-width right sidebar. Within the main section, I have my tabbed div. The entire page grows with the width of the window, so when the window is resized, the tabbed div grows horizontally in size too.

My problem is that the image that I'm loading inside one of the tabbed divs is generally much, much wider than the window usually is (they're panorama pictures; very lengthy horizontally, but not much vertically).

I know that I can force the contents of #interior-photo to scroll horizontally using the CSS rule above, but that only seems to work when that same div has a fixed width. Since I want that div to have a variable width, it always seems to di开发者_如何转开发splay the full width of the image, pushing my layout way out of whack.

I know how to fix this using Javascript, but I was wondering if anyone has a CSS-only solution. If you need more information about my layout to solve this issue, please let me know. Thanks!

Unless your target div is constrained either by a fixed width style or by a container with a fixed width or whose ancestors include a fixed width, you won't be able to get your target div to acquire scrollbars. It will just go as wide as its contents, and the browser scrollbars will take over.

Actually, there is a way around this. You can specify to display the image with scrollbars, and thus confine the viewable portion to the size of the div. Basically, the image will expand to the size of the div, and then have a horizontal scrollbar if the horizontal image size exceeds the horizontal size of the div. Scrollbars will not be displayed if the image's vertical component exceeds the div's. You can set both the x and y to scroll on overflow with the overflow declaration. However, in order to use any of these, the div's size must be controlled through some means, even through the initial declaration.

#interior-photo { overflow-x: scroll; }