Auto height for div is correct only when images do not float

[inkswamp]

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>

[Steve Pugh]

"inkswamp" <in******@gmail.comwrote:

>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?

Floating an element takes it out of the flow, hence it is not included
when the height if its parent is calculated.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net <http://steve.pugh.net/>

[Emil Stenström]

inkswamp wrote:

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.

That's how floats work. You can read about it on Eric Meyers excellent
article "containing floats":
http://www.complexspiral.com/publica...aining-floats/

--
Emil Stenström
http://friendlybit.com

[Jim Moe]

inkswamp wrote:

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.

See <http://css.maxdesign.com.au/>.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)