DavidR DavidR - 3 months ago 16
CSS Question

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

Say you have a div, say you color it green and give it a definite width, when I put stuff within 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 contents. 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?

Answer

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