Html – Force horizontal expansion

csscss-floathorizontal-scrollinghtml

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 reaching the end and starting a new line?

I am already using float: left and display: inline-block but they reach the end of their container and make a new line instead of forcing the container to expand horizontally to fit them and thus forcing the horizontal scrollbar to be needed

so the div boxes are force to do this:

[ ][ ][ ][ ][ ][ ][ ][ ][ ][ ]
      <---->scroll

instead of:

[ ][ ][ ][ ]
[ ][ ][ ][ ]

code:

<div style="overflow-x: scroll; overflow-y:hidden; width:500px; height: 140px;">
     <div style="width: auto;">
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
     <div>
</div>


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

Best Answer

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..
Related Topic