Possible for a row of inline images to not trigger horizontal scrollbar?

Does anyone know if it is possible to display a group of inline images horizontally in a row (or any element at that), allowing the group to extend beyond the right edge of the screen, without triggering the horizontal scrollbar?

A quick example:

<div class="page_container" style="width:900px; position:relative">
  <div class="image_set">    
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
    ...etc
  </div>
</div>

The catch is that the image_set div that I would like to extend to, or beyond the right edge of the browser, is contained in a 900px div. The image_set needs to extend outside of its container, and to, or past the edge of the browser window.. without trigge开发者_如何学编程ring a scrollbar.

The 900px wide page_container element needs to interact normally with the browser window (triggering scrollbars), and the element must contain the images. However, the images must be allowed to flow off the right edge of the browser window (visually)

So I'm wondering if there is a way to accomplish this with css only, without javascript?

Just make the container div have a fixed width and then give it the overflow: hidden proprty. So something like:

<div class="image_set" style="width:100%; overflow: hidden;">    
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
    <img src="xxx.jpg" alt="" width="200" height="400" />
</div>

By default overflow is auto which will apply scroll bars when needed thus setting it to hidden will mean that anything which does break the container will just disappear without needing scrollbars, and since for you that is the edge of the window, the effect will be complete.

In order to have the containing div cover the width of the entire page, you must first alter its layout model from block (which determines its width via its parent div) to absolute or fixed.

With the property position: absolute a div is positioned relative to its first parent with a relative position, this is usually the window itself, thus you can make the container div for the filmstrip use this property:

<div class="image_set" style="position: absolute; width:100%; overflow: hidden;">
</div>

So basically what you want to prevent is a double scroll bar?

try:

<div class="image_set" style="width:100%;position: relative;">

Here ya go: http://jsfiddle.net/Vppxp/

CSS

#filmstrip {
    border-bottom: solid 5px rgb(220,220,220);
    border-top: solid 5px rgb(220,220,220);
    overflow-x: auto;
    padding: 5px 0;
    white-space: nowrap;
}
#filmstrip .cell {
    background: rgb(220,220,220);
    display: inline-block;
    height: 100px;
    width: 100px;
}
#filmstrip .cell + .cell {
    margin-left: 1px;
}

HTML

<div id="filmstrip">
    <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
</div>