How to Do a 'Float: Left' with No Wrapping

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 to do a `float: left` with no wrapping?

You need box 3 to be a block level element, so use display:block and then toss in an overflow:hidden in conjunction with float-ing box 2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            #box1 {  }
            #box2 { float:left; }
            #box3 { display:block;overflow:hidden; }

            /* Styling */
            #box1 { background: #ddd; padding: 1em 0.5em; width: 20em }
            #box2 { background: #999; padding: .5em; }
            #box3 { background: #bbb; padding: .5em; }
            body  { font-family: sans-serif }

        </style>
        <script type="text/javascript">
        </script>
        <title>How to do a `float: left` with no wrapping?</title>
    </head>
    <body>
        <div id="box1">
            <span id="box2">2</span>
            <span id="box3">3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br /></span>
        </div>
    </body>
</html>

Amazing all the things overflow:hidden can do :D

CSS float left, without wrapping and fixed size

To avoid this add a negative margin-right to the last element so that its width is not counted in the total width and it can be kept on the first row (but can overflow):

timerow a:last-child, timerow2 a:last-child {
  margin-right: -40px;
}

Full code:

body {
  background-color: #DDD;
}

.block {
  display: block;
  background: #ccc;
  height: 100%;
  font-size: .75em;
  float: left;
}

.block:nth-child(n+2) {
  margin-left: 0.5%;
}

.barchart {
  grid-area: all;
  display: grid;
  grid-template-columns:
  [viewport-start] minmax(9px, 1fr)
  [container-start] minmax(20em, 35em)
  [container-end] minmax(9px, 1fr) [viewport-end];
  grid-auto-rows: 30px;
}

row {
  padding: 5px;
  box-sizing: border-box;
  grid-column: container;
  grid-row: span 4;
  line-height: 120px;
  text-align: center;
}

timerow {
  grid-column: container;
  grid-row: span 1;
  line-height: 16px;
  margin: 0 5px;
  
  background: rgba(0,0,0,0.2);
  display: flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
}

timerow a {
  height: 20px;
  width: 40px;
  font-size: 15px;
  color: #919191;
  text-align: center;
  background: #fff;
}

timerow a:first-child, timerow2 a:first-child {
  margin-left: -21px;
}
timerow a:last-child, timerow2 a:last-child {
  margin-right: -40px;
}

timerow2 {
  grid-column: container;
  grid-row: span 1;
  line-height: 16px;
  margin: 0 5px;
  
  background: rgba(0,0,0,0.8);
}
timerow2 a {
  height: 20px;
  width: 40px;
  font-size: 15px;
  color: #919191;
  text-align: center;
  background: #fff;
  float: left;
}

<div class="barchart">
  <row style="animation: none;width:100%;">
    <a style="width:28.9444444444%;" class="block"></a>
    <a style="width:63.805555555%;" class="block"></a>
    <a style="width:6.25%;" class="block"></a>
  </row>
  
  <timerow>
  <a>00:00</a>
  <a style="margin-left:calc((28.94444 + 0.25)*1% - 40px);">07:30</a>
  <a style="margin-left:calc((63.8055 + 0.5)*1% - 40px);">22:30</a>
  </timerow>
  
  <timerow>
  <a>00:00</a>
  <a style="margin-left:calc((28.94444 + 0.25)*1% - 40px);">07:30</a>
  <a style="margin-left:calc((63.8055 + 0.5)*1% - 40px);">22:30</a>
  <a>24:00</a>
  </timerow>
  
    <timerow2>
  <a>00:00</a>
  <a style="margin-left:calc((28.94444 + 0.25)*1% - 40px);">07:30</a>
  <a style="margin-left:calc((63.8055 + 0.5)*1% - 40px);">22:30</a>
  <a>24:00</a>
  </timerow2>

</div>

CSS div float left and right nowrap

Example with left, right, top and bottom margins added; multiple divs; adjust height of main frame; set left margin for left most left floating div; and right margin of right most floating Div:

Result:

Sample Image

Styling and HTML in one file:

<html>
<body>
<style>

.row {
    float:left;
    border: 3px solid blue;
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
    height: 115px;
    overflow: auto;
    position: static;
}

.floatLeftDiv {
    display: inline-block;
    border: 3px solid red;
    width: 200px;
    height: 100px;
    margin-top: 3px;
}

.right {
    float: right;
    border: 3px solid red;
    width: 200px;
    height: 100px;
    margin-top: 3px;
    margin-right: 1%;
}

</style>

<div class="row">
    <div class="floatLeftDiv" style="margin-left: 1%;">Inline Item A:</div>
    <div class="floatLeftDiv">Inline Item B:</div>
    <div class="floatLeftDiv">Inline Item C:</div>
    <div class="right">Inline Item D:</div>
</div>

</body>
</html>

Code modified from this discussion and another one.

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>

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.

CSS: series of floated elements without wrapping but rather scrolling horizontally

How about using display: inline-block this way you can use borders on the block elements and get the horizontal scroll bar.

#thumbnails_container {
    height:75px;
    border:1px solid black;
    padding:4px;
    overflow-x:scroll;
    white-space: nowrap
}
.thumbnail {
    border:1px solid black;
    margin-right:4px;
    width:100px; height:75px;
    display: inline-block;
}