CODEWITHSUNDEEP
htmlcsscss-float
Adam Grant
Adam Grant

Reputation: 13125

Prevent floated divs from wrapping to new line

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 run off, horizontally a parent div with a horizontal scroll bar.

I'm able to demonstrate what I want to do with this crappy inline css here: http://jsfiddle.net/ajkochanowicz/tSpLx/3/

However, from the answers given on SO*, this should work but does not on my end. http://jsfiddle.net/ajkochanowicz/tSpLx/2/

Is there a way to do this without defining absolute positioning for each item?

*e.g. Prevent floated divs from wrapping to next line

Upvotes: 19

Views: 56422

Answers (3)

BraMKJ
BraMKJ

Reputation: 193

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
}

Upvotes: 0

AaronSieb
AaronSieb

Reputation: 8266

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.

Upvotes: 16

Kory Sharp
Kory Sharp

Reputation: 490

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.

Upvotes: 1

Related Questions