Stop Floating Divs from Wrapping

How to stop divs from wrapping?

Instead of using float: left, you can use display: inline-block and wrap in a container using white-space: nowrap.

.floater {
  height: 100%;
  width: 360px;
  display: inline-block;
  border: 1px solid black;
}

.container {
  white-space: nowrap;
}

<div class="container">
  <div class="floater">Floating</div>
  <div class="floater">Floating</div>
  <div class="floater">Floating</div>
  <div class="floater">Floating</div>
  <div class="floater">Floating</div>
</div>

CSS non-wrapping floating divs

Use display: inline-block instead of floatand give the container white-space: nowrap.

div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
}
div#sub > div#ranking > div.player {
    display: inline-block;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

Here an example: http://jsfiddle.net/D5hUu/3/

How can I prevent floated div elements from wrapping when the browser is re-sized?

Wrap them in another div, which has a width (or min-width) specified.

<div class="parentContainer">
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
</div>

.parentContainer {
    /* The width of the parent needs to be equal to the total width of the children.
    Be sure to include margins/padding/borders in the total. */
    width: 600px;
    overflow: auto;
}

It also helps to have overflow: auto specified on the containing div, to allow its height to match the child floats.

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>

Prevent floated divs from wrapping to next line

You can also achieve that with CSS only.

Just assign the following CSS attributes to #row4:

#row4 {
    min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
    overflow:hidden;
}

This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.

Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:

http://www.thecssninja.com/xhtml/ie6-min-width-solutions

Prevent float from wrapping and force text-overflow when needed

Use flexbox:

div {  background: #abcdef;  display: flex;}.name {  text-overflow: ellipsis;  overflow: hidden;  white-space: nowrap;}.size {  margin: 0 .5em;}.price {  margin-left: auto;}

<div>  <span class="name">Blue Widgets Over Miami</span>  <span class="size">large</span>  <span class="price">$9.99</span></div><br /><div>  <span class="name">Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami</span>  <span class="size">large</span>  <span class="price">$9.99</span></div>

Is it possible to prevent wrapping of child elements in HTML?

If you don't want wrapping, you should not use floats - they were created specifically for wrapping.

Use a parent container with overflow:auto and white-space:nowrap and children with display:inline or inline-block.

Prevent float left div from going to a new line

Hi i think you should this check to this demo

.wrapper {  margin: 0 auto;  width: 80%;  border: solid 1px red;  overflow: hidden;}.gridf,.grid,.gridl {  Background: green;  width: 24%;  min-height: 100px;  float: left;  margin: 2px 0;}.gridf {} .grid {  margin: 2px 1%;}.gridl {  background: yellow;}

<div class="wrapper">
  <div class="gridf">One</div>  <div class="grid">Two</div>  <div class="grid">Three</div>  <div class="gridl">Four</div>
</div>

---

Related Topics