Floating image to the left changes container div's height

Question

Hello,

When I try to run the following:

​<div id="container">
     //This is a 200x200 image        
     <img src="http://dummyimage.com/200x200/CCC/000" />
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

with CSS:

​#container {
    background:#000;
}

​I get a DIV with a black background container like I want.

However, when I add the following to the CSS:

#container img {
   float:left;
}

It seems like the container does not detect the image inside it and its height is set to minimum (can be seen here: http://jsfiddle.net/wc4GJ/ ).

How come floating the image to the left mess up the container DIV's height?

Thanks,

Joel

Answer 1

You need to add a clearing div after the img:

​<div id="container">
     //This is a 200x200 image        
     <img src="http://dummyimage.com/200x200/CCC/000" />
     <div class="clearing"></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

And in CSS:

.clearing { clear: both; }

Answer 2

Add overflow:auto; to #container

(Explanations below)