Wrapper Question When Containing Floating Divs

div appearing next to wrapper that contains elements with float: left...?

Use .clearfix.

You always need to clear given float's to elements.

Define a clearfix class and call it in wrapper.

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

<div class='wrapper clearfix'>

Example : http://jsfiddle.net/kaAjW/3975/

Wrapper div height is 0 with floated elements inside

Set overflow: hidden on the parent.

<div class="outside" style="border:1px solid #555;overflow:hidden;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

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>

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/

Why is my text still wrapping under a floated div?

That's how float is supposed to work - text "floats" around it.

Instead of using float, you could either define both containers as inline-block, with according widthsettings, or you could put display: flex on the container element.

If you know the width of the image, you can use that for a fixed width on the image container and use calc for the width of the text container, like width: calc( 100% - XXpx );, where XX stands for the width of the image.

how to make a div to wrap two float divs inside?

It's a common problem when you have two floats inside a block. The best way of fixing it is using clear:both after the second div.

<div style="display: block; clear: both;"></div>

It should force the container to be the correct height.

Floating elements within a div, floats outside of div. Why?

The easiest is to put overflow:hidden on the parent div and don't specify a height:

#parent { overflow: hidden }

Another way is to also float the parent div:

#parent { float: left; width: 100% }

Another way uses a clear element:

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

CSS

span.clear { clear: left; display: block; }

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.