How to make an inner div push the outer div down.

Question

Suppose I have an div. Inside this div, I have two divs floating left, right next to each other, I believe. The left div is for a picture. For some reason, when the picture is too tall, it doesn't push the outer div to fit the picture. Instead, the picture just keeps going on its own and goes "beyond" the outer div's bottom border. How can I make it so that the picture expands the outer div too?

<div>
    <div class="left">
    </div>

    <div class="right">
    </div>
</div>

Answer 1

<div style="overflow: auto">
    <div class="left">
    </div>

    <div class="right">
    </div>
</div>

Answer 2

If you have a div with two elements, the largest one that is not floated will push the outer div. If you have a div with two floated elements you will need a div with a clear:both to allow everything to be pushed down.

Answer 3

adding either "overflow: auto;" or "overflow: hidden;" to the containing div are both good solutions (each with it's own quirks depending on the exact scenario, but very reliable). You'll need to add hasLayout for this to work in IE. Easiest is to add:

.container {
  overflow: hidden;
  display: inline-block; /* triggers hasLayout in IE */
}

.container {
  display: block; /* back to block */
}

More options here: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/