Prevent floated divs from wrapping to new line

Question

I\'ve seen this asked a few times on SO, and the same answers are given which do not work on my end in Chrome or Firefox.

I want to make a set of left-floated divs r

Answer 1

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 divs. 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.

Answer 2

Use a second wrapper around the elements with absolute positioning. Then you can just float the individual items.

<style type="text/css">
    #outter {
        position: relative;
        width: 500px;
        height: 200px;
        overflow: scroll;
    }
    #inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 1000px;
        height: 200px;
    }
    #inner .item {
        float: left;
        display: inline;
    }    
</style>

<div id="outter">
    <div id="inner">
        <div class="item">Item #1</div>
        <div class="item">Item #2</div>
        <div class="item">Item #3</div>
    </div>
</div>

You will have to adjust the width of #inner based on the number of items you'll have inside it. This can be done on load if you know the number of items or with javascript after the page loads.

Answer 3

This question has been asked quite a while ago, but still shows up high in search engine results. Therefore I feel it is still useful to add a new answer. It is now also possible to achieve the desired outcome without setting a fixed width to the parent by using flexbox (which now has decent browser support).

Using the class names from the example (which are a bit off now since the elements aren't actually floated anymore):

.float-wrap {
  display: flex;
  flex-wrap: nowrap;
}

.left-floater {
  flex: 0 0 100px;
}

.outer {
  overflow-x: auto
}