When attempting to execute the code below:
<div id="container">
//This is a 200x200 image
<img src="http://dummyimage.com/200x200/CCC/000" />
</div>
using CSS:
#container {
background:#000;
}
I achieve the desired result of a DIV with a black background container.
However, after adding the following CSS:
#container img {
float:left;
}
The container no longer recognizes the image inside it and its height appears minimal (viewable here: http://jsfiddle.net/wc4GJ/ ).
What is causing floating the image left to interfere with the container DIV's height?
Appreciate the help,
Joel