468,107 Members | 1,314 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,107 developers. It's quick & easy.

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

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>

Jul 23 '06 #1
3 13986
"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/>
Jul 23 '06 #2
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

Jul 23 '06 #3
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)
Jul 23 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Harris Kosmidhs | last post: by
8 posts views Thread by Kentor | last post: by
1 post views Thread by neridaj | last post: by
1 post views Thread by Solo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.