268454 - float:left declaration breaks when no width specified for a div

Status: RESOLVED INVALID

(Core :: Layout: Floats, defect)

Description

[Benjamin Lupu]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040626 Firefox/0.9.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040626 Firefox/0.9.1

Bonjour,

In attached test case, text must not go under the left image when greater than 2
lines.

Reproducible: Always
Steps to Reproduce:
- Have an image set to float:left.
- Have a div with arbitrary text inside and set to float:left. No width is
specified.
- Both are encapsulated into a div with a fixed width.
Actual Results:  
When text goes on 2 lines, its encapsulating div seems to inherit its parent
container width and goes under the image.

Expected Results:  
Text must go straight when its height is greater than its companion image.

Comment :
- works fine in IE (see screen captures).
- workaround : declare display:table-cell for the text div.

Thank you for your help :-)

- Ben

Comment 1

[Benjamin Lupu]

Attachment: Test case in IE 6

Comment 2

[Benjamin Lupu]

Attachment: Test case in FF 0.9.1

Comment 3

[Benjamin Lupu]

Attachment: Test case (HTML)

Comment 4

[Hixie (not reading bugmail)]

CSS says that the remaining room must be ignored when determining float width.

If you change the window with in IE and then view this test:
   http://www.hixie.ch/tests/adhoc/css/box/float/008.html
...you'll see why.

Comment 5

[Benjamin Lupu]

Ok. Thank you. Anyway from a design perspective, it's annoying as I have to 
switch back to a micro-table to be able to achieve the purposed effect.

Comment 6

[Hixie (not reading bugmail)]

Well, tables weren't intended for this kind of layout. In CSS2 the correct way
to get that kind of layout would be with 'display:table' and friends.
Unfortunately IE doesn't support that.