force nested divs/spans onto one line - css

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;
}

Answer 2

yes, you can use inline-block to do this in combination with a white-space: nowrap. It will place all the elements on one row without wrapping them.
fiddle: http://jsfiddle.net/1zmeztt3/1/
.outer{
width: 100px;
height:40px;
overflow-x: auto;
white-space: nowrap;
}
.inner{
background:red;
width:50px;
height:20px;
display: inline-block;
}
You should also use overflow-x to prevent vertical scrolling and increase the height of the row to make sure the scrollbar will fit inside of it.

Answer 3

The problem you are having is the three floating divs calculate their positions based on the width of the parent element. A reasonable solution would be to nest 2 outer divs, with the inner one being wide enough for all 3 floating divs and the outer one having the restricted width and scrolling.
HTML:
<div class="outer">
<div class="nest">
<div class="inner"></div>
<div class="inner blue"></div>
<div class="inner"></div>
</div>
</div>
CSS:
.outer{
width: 100px;
height: 30px;
overflow-x: scroll;
overflow-y: hidden;
}
.nest{
width: 150px
}
.inner{
background:red;
width:50px;
float:left;
height:20px
}
.blue{
background: blue;
}
jsfiddle
Problems might arise in that the width of the inner div depends on how many floating divs you have and how wide they are. So this solution may not be the best if these factors may be arbitrary.
Edit: I would go with SW4's solution but it might not work on older IE browsers.

Answer 4

You could try to use:
clear: none;
Here is a link:
http://www.w3schools.com/cssref/pr_class_clear.asp
No longer valid response after the edit of the original post.