float left does not wrap around floated child DIVs correctly if more than two rows

RESOLVED INVALID

Status

()

Core
Layout
RESOLVED INVALID
10 years ago
10 years ago

People

(Reporter: ifubad, Unassigned)

Tracking

({testcase})

Trunk
x86
Windows XP
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

10 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

The example page explains it completely. I included the html and css below, just in case the example URL becomes broken.

When one or more floated left child DIVs with specified width and height are in a floated left container, the container should wrap around the child DIVs and not take up the full width of its parent container. This works perfect in Firefox 2, and it works the same in Firefox 3, however, in Firefox 3, when there are too many child DIVs, where it has to wrap to the second row, the parent container will stretch and take up the full width of its parent container.

Reproducible: Always

Steps to Reproduce:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
    <style type="text/css">
    .con1 {
        width: 300px;
        border: 2px solid black;
    }

    .con2 {
        float: left;
        border: 2px dashed red;
    }

    .img {
        float: left;
        width: 125px;
        height: 125px;
        border: 2px solid blue;
    }

    .clear {
        clear: both;
    }
    </style>
</head>
<body>

Black - parent: has width set<br>
Dashed Red - parent: has float:left set<br>
Blue - Child: have float:left , width and height set

<p>
In Firefox 2, the dashed red parent will wrap around the blue child(s) and not
take up the full width of the black parent.
</p>

<p>
In Firefox 3, if the child DIVs have to wrap to the second row, the dashed red
parent will take up the full width of the black parent, which should <b>not</b>
be the case.
</p>

<div class="con1">
    <div class="con2">
        <div class="img">
        </div>
    </div>
    <div class="clear"></div>
</div>
<p></p>

<div class="con1">
    <div class="con2">
        <div class="img">
        </div>

        <div class="img">
        </div>
    </div>
    <div class="clear"></div>
</div>
<p></p>

<div class="con1">
    <div class="con2">
        <div class="img">
        </div>

        <div class="img">
        </div>

        <div class="img">
        </div>
    </div>
    <div class="clear"></div>
</div>

</body>
</html>

Updated

10 years ago
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → Trunk
(Reporter)

Comment 2

10 years ago
Here is the example page http://ifubad.awardspace.com/floatwrapissue.html

Updated

10 years ago
Keywords: testcase

Comment 3

10 years ago
This change is intentional, to implement shrink-to-fit according to
CSS 2.1 10.3.5:
http://www.w3.org/TR/CSS21/visudet.html#float-width

->INVALID
Status: UNCONFIRMED → RESOLVED
Last Resolved: 10 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.