Geek Answers Handbook

How to make an inner div by pushing the outer div down

Suppose I have a div. Inside this div, I believe I have two divs floating to the left, next to each other. The left div is for the image. For some reason, when the image is too tall, it does not push the outer div towards the image. Instead, the picture simply continues to act on its own and goes beyond the outer border of the lower bottom. How can I make it so that the image also extends the outer div?

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

    <div class="right">
    </div>
</div>
+5
source share
3 answers

"overflow: auto;", "overflow: hidden;" div - ( , ). hasLayout IE. :

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

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

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

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

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

If you have a div with two elements, the largest one that doesn't float will preempt the outer div. If you have a div with two floating elements, you'll need a div with clear ones: both so that everything gets reset.

+1
source

More articles:


All Articles