Prevent floated divs from wrapping to new line

stop div from wrapping
css nowrap div
html div line break
div new line
css prevent wrapping
html keep elements on same line
two div in one 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

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>

html - 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� Of course, if you want the divs to occupy 100% of the containing element, it gets a little trickier. Below is one example of how you can create three div's next to each other that occupy 100% of the element. In the example below, instead of keeping all div's on the same line using inline-block, we are floating the left and right div.

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.

How to prevent a div from breaking to the next line, Steps on how to prevent a div from breaking to the new line and keeping An HTML <div> or division is a block-level element that is designed not to on the same line using inline-block, we are floating the left and right div. Anyhow, on all the pages except the forums, the divs line up perfectly. However, on the forums page, the right div doesn't stay up top, instead it wraps around under the left div. However, I still get all the space to the right of the left div where the right one should go. Anybody with Opera should be able to check it out and see what I mean.

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
}

Prevent floating sibling elements from wrapping in CSS, Use it. When you style multiple adjacent block elements with float: left , they will be rendered next to each other similar to inline elements� We can prevent inline-block divs from wrapping by adding suitable Bootstrap classes. Let us understand this with the help of an example: Example 1: We have to display multiple tables that have been laid out using suitable bootstrap row and column classes.

Use "overflow: hidden" to avoid floating elements from wrapping a , Use "overflow: hidden" to avoid floating elements from wrapping a container's text a> </div> <div id="content"> Hello Universe! The reason behind this is that " overflow: hidden " will give you a new block formatting context. where you want to truncate one of two strings in one line that can both vary in length, while fully� Divs are block level elements - which means they create a new line. If you want block level elements next to eachother then they will need to be floated with float:left or float:right. Remember to clear them with clear: both when you want stuff to start going onto new lines. To prevent them from wrapping you can use the overflow: parameter.

How to prevent inline-block divs from wrapping ?, The major difference between display: inline; and display: inline-block; is that, display: inline-block; also allows us to set the width and height of the element. We can prevent inline-block divs from wrapping by adding suitable Bootstrap classes. Depends on your needs. This does stop floated divs from wrapping when the page is resized, but the asker stated "I don't want to specify the width of the row, the width should automatically be the width of its child cells". Manual width specification requires some duplicated work, since you need to compute the total width of the row.

Stop DIVs moving next line - HTML & CSS, div { width: 100px; height: 100px; float: left; border: 1px solid black; design for a min width, wrap them in container, use min width on body, etc What does one need to include in the DIVs coming after: As the images are floated then obviously any following content will sit to the side of the image unless you set it to clear or don't

Comments
  • Excellent work, Aaron. Here is a link to the JSFiddle for readers: jsfiddle.net/ajkochanowicz/wkqQU
  • Is it possible to have the width: attribute in the .float-wrap selector automatically computed? Or must it be hard-coded?
  • @feralin In standard CSS, it has to be hard coded. If you use LESS or Sass, you can use variables to get something like width: @floatsPerRow * (@floatWidth + 2 * @floatBorderWidth)
  • If the number of floats in the row can change over time, then is javascript the way to go to compute the required width?
  • Hey folks this is perfect, but my number of elements depends on how many items the user will add, so I can't set a specific width to the .float-wrap element. Any ideas? Thanks.
  • Sorry. Just fixed the CSS. #inner .left should have been #inner .item.
  • Thanks, @Kory. I cleaned this up and added a width and height value to the floated divs, but it still does the same thing: jsfiddle.net/ajkochanowicz/7Feaj
  • Just made a revision, it appears if you make another child div and give that the width/height values (but not "float:left") it then works: jsfiddle.net/ajkochanowicz/7Feaj/1
  • Hmm, but now you have to specify a px value for the width of .outer. Making it 100% breaks it.
  • Are you wanting this to be a fluid width container? Either way, you'll need to dynamically update the width of the #inner container to accommodate the exact size of it's children. That make sense?