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

css, css-float, html

Solution

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; }

Problem

Say you have a `div`, give it a definite `width` and put elements in it, in my case an `img` and another `div`. The idea is that the content of the container `div` will cause the container `div` to stretch out, and be a background for the content. But when I do this, the containing `div` shrinks to fit the non-floating objects, and the floating objects will be either all the way out, or half out, half in, and not have any bearing on the size of the big `div`. Why is this? Is there something I'm missing, and how can I get floated items to stretch out the `height` of a containing `div`?

Original source

Related problems