Force horizontal expansion

Question

For a sort of thumbnail horizontal sliding viewer

How can I make the divs inside the horizontal scrolling divs force the scrolling div horizontally, instead of reach

Answer 1

You don't need float and display:inline-block, and floats won't do it.. so you have to remove the float rule, (add a workaround for IE7 and below *) - When float is present browsers ignore the display property

.box{
    width: 100px;
    height: 100px;
    border: solid 1px black;
    display: inline-block;
}

.box {display: inline !ie7;} /* to make it work in IE7 and below */

with white-space: nowrap on the inner div

<div style="overflow-x: scroll; overflow-y:hidden; width:500px; height: 140px;">
     <div style="width: auto; white-space: nowrap">
etc..

Answer 2

Try this:

<div style="width: 200px; height: 100px; overflow: scroll; white-space: nowrap">
    FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO
    FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO
    <span id="a1">BAR!</span>
    FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO
</div>
<a href="#a1">scroll to bar (HTML anchor)</a>
<input type="button" value="scroll to bar (JS scrollIntoView)" />
<input type="button" value="scroll to bar (JS scrollLeft)" />

<script type="text/javascript">
    var a1= document.getElementById('a1');
    var buttons= document.getElementsByTagName('input');

    buttons[0].onclick= function() {
        a1.scrollIntoView();
    };
    buttons[1].onclick= function() {
        a1.parentNode.scrollLeft= a1.offsetLeft;
    };
</script>

link