284504 - If a image is placed using css float parent tag remains as high as without the image within.

Status: RESOLVED INVALID

(Core :: Layout: Floats, defect)

Description

[Mika Karjunen]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; fi-FI; rv:1.7.6) Gecko/20050223 Firefox/1.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; fi-FI; rv:1.7.6) Gecko/20050223 Firefox/1.0.1

As seen in the sample I sent div tag is as high as the text in it makes it.
Image should stretch it further but nothing happens. The problem remains every time.

Reproducible: Always

Steps to Reproduce:
1. Make div tag
2. Define img css as follows: img{ float:right; }
3. Place image inside the div tag.

Actual Results:  
Problem, as described above, remains. Div -tag is displayed incorrectly.

Expected Results:  
Div tag should have been stretched into same height as the floating image inside it.

Comment 1

[kuegler_david]

this bug is not limited to images, placing a div with the same properties (large
height) in a div does not resize the outer div.

Codesample:
<div style="background-color:#FF0000;">
<div style="height:100px; float:left">Text</div>
more Text
</div>
</div>

this should yield a 100 Pixel high red div ... but it is only one line high ....

Comment 2

[kuegler_david]

this bug is also not limited to CSS <img align=left> causes the same problem!

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Floats aren't supposed to affect the height of their container.  If you want
them to, you need to use 'clear'.

Comment 4

[kuegler_david]

Clear does not depend on inner floats ... so a fix to with problem is

<div style="background-color:#FF0000;">
<div style="height:100px; float:left">Text</div>
more Text
<div style="clear:left;height:0px"></div>
</div>

But there should be an easier way to stretch the container, because 
<div style="background-color:#FF0000;">
<div style="height:100px; float:left; clear:left">Text</div>
more Text
</div>
</div>
does not work

Comment 5

[Mika Karjunen]

I understand now. This property is quite poorly documented in internet. It's
fairly easy to think that this is a bug. Clearly it's a bug but not Gecko but
rather in IE.

Inner floating element shouldn't stretch outer element if the next doesn't deny
floating. It can be denied by using clear.

Thank you. I'll publish the solution as well.

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

It's only a bug in Windows IE some of the time:  IE basically has two different
implementations of 'display: block':  the normal one, and a special one that you
get if you specify a non-default value of 'width' or 'height' or 'float' or a
few other things.  This is only a bug in the second -- if IE had this bug in
both it would be really noticeable as a bug in IE.

Comment 7

[Mika Karjunen]

I have published "fixed" code as well.
http://www.kaannos.net/Bugzilla/Bug_Float/

I admit my mistake and thank Mozilla Foundation for correcting me. Thanks David,
keep up the good work!