force nested divs/spans onto one line

Question

I have a structure that is something like this fiddle http://jsfiddle.net/qqqh1agy/1/

HTML:

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

CSS:

.outer{
    width: 100px;
    height:20px;
    overflow: auto;
}
.inner{
    background:red;
    width:50px;
    float:left;
    height:20px
}

I want the inner divs to be on one line with a horizontal scrollbar. Is this possible?

Any ideas greatly appreciated

C

Answer 1

Add white-space:nowrap; to the outer div, then replace float:left with display:inline-block on the inner divs

This forces the inner elements to display on a single line, whilst preventing them from wrapping to the next.

Demo Fiddle

.outer {
    width: 100px;
    height:20px;
    overflow-x: scroll;
    white-space:nowrap; /* <-- force items to display on the same line */ 
}
.inner {
    background:red;
    width:50px;
    height:20px;
    display:inline-block; /* <-- display 'in a row' */ 
}

That said, to properly display your scrollbar and content, you may want to change your CSS to:

Demo Fiddle

.outer {
    width: 100px;
    overflow-x: auto; /* <-- show horizontal scrollbar */
    overflow-y:hidden; /* <-- hide vertical scrollbar */
    white-space:nowrap;
}
.inner {
    background:red;
    width:50px;
    height:20px;
    display:inline-block;
}