Question

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

Answer 1

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.