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

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/