I've been using CSS for quite a while now but I have yet to master its
eccentricities. Here's something I recently ran across and if someone
could explain why this happens, I would appreciate it.
I've included code below. The code produces three divs, each with
height set to "auto." Within each div is an image. If I float the image
left or right, the height of the box does not accommodate the height of
the image automatically. If I don't apply a float to the image, the
height of box stretches out to accommodate the image height.
Why? I've searched and read as much as I can find about this and
nowhere have I found an explanation. Is this some esoteric aspect of
how CSS (or more specifically height:auto) works that I have yet to
understand or is it just a bug?
Here's the code. The first two examples create divs with seemingly
incorrect heights.
<div
style="padding:10px;width:100%;height:auto;backgro und-color:yellow;">
<img src="test.jpg" style="float:right;">
</div>
<br clear="all"><br><br>
<div
style="padding:10px;width:100%;height:auto;backgro und-color:yellow;">
<img src="test.jpg" style="float:left;">
</div>
<br clear="all"><br><br>
<div
style="padding:10px;width:100%;height:auto;backgro und-color:yellow;">
<img src="test.jpg">
</div>