Prevent floated divs from wrapping to new line
This should be all you need.
.float-wrap {
/* 816 = <number of floats> * (<float width> + 2 * <float border width>) */
width: 816px;
border: 1px solid;
/* causes .float-wrap's height to match its child divs */
overflow: auto;
}
.left-floater {
width: 100px;
height: 100px;
border: 1px solid;
float: left;
}
.outer {
overflow-x: scroll;
}
<div class="outer">
<div class="float-wrap">
<div class="left-floater">
One
</div>
<div class="left-floater">
Two
</div>
<div class="left-floater">
Three
</div>
<div class="left-floater">
I should be to the <s>left</s> right of "Three"
</div>
<div class="left-floater">
I float.
</div>
<div class="left-floater">
I float.
</div>
<div class="left-floater">
I float.
</div>
<div class="left-floater">
I float.
</div>
</div>
</div>
.float-wrap keeps space open for the div
s. Because it will always maintain at least enough space to keep them side-by-side, they'll never need to wrap. .outer provides a scroll bar, and sizes to the width of the window.