Closed Bug 272771 Opened 20 years ago Closed 20 years ago

Specifying CCS 'float' causes containing element not to grow to contain the floater

Categories

(Core :: Layout, defect)

Other Branch
x86
Windows 2000
defect
Not set
major

Tracking

()

RESOLVED INVALID

People

(Reporter: wjrf, Unassigned)

References

()

Details

Attachments

(2 files)

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

Sibling <DIV>s A and B have been specified with a CSS style of float left and
right respectively. They are contained by <DIV> X. But because of the float
specification, X does not grow to accomodate A and B. In fact X ends up with a
zero height.

This means that (antecedent) siblings of X are merged in amongst A and B instead
of being separated (and typically coming after).

NB this has been tested with valid xhtml.

Reproducible: Always
Steps to Reproduce:
1. Create a web page with 2 sibling <DIV>s X and Y. Insert 2 more sibing <DIV>s
A and B into X. Add some text to each.

2. Create a stylesheet that define A to float left and B to float right. Give
all the elements solid and colourful borders so that you can easily see the the
rendering issue.
Actual Results:  
A floats left, B floats right, but X (which supposedly contains A and B) has
zero height, and Y (sibling of X) is crammed up in between A and B.

Expected Results:  
X should have grown to contain A and B.
Y should have appeared beneath X (and A and B).

I'll try to keep the server showing this error up for a while, but in case it
goes down, I'll also attached the html and css.
Assignee: firefox → nobody
Component: General → Layout
Product: Firefox → Core
QA Contact: firefox.general → core.layout
Version: unspecified → Other Branch

*** This bug has been marked as a duplicate of 210703 ***
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → DUPLICATE
This may be a duplicate of 210703, but IMO 210703 was resolved in error.
See the lengthy discussion in 209694 for how containers are meant to resize
themselves to include floaters.

I'm hoping that 209694 (which has now been resolved) will also fix my issue. But
since they seem to have focussed on floaters + clearance I am not certain.
Status: RESOLVED → UNCONFIRMED
Resolution: DUPLICATE → ---
Since you mention bug 209694 you should have noticed there are lots of 
references to CSS's 'clear' property there. Where is the clear in your testcase?
Floats are taken out of flow, so they do not affect the size of their parents. 
This is correct.  If you need to have the parent grow, you need to add an
in-flow child after the floats with clear set on it (and then the fixes for bug
209694 would indeed kick in).
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago20 years ago
Resolution: --- → INVALID
(In reply to comment #6)
> Floats are taken out of flow, so they do not affect the size of their parents. 

As I read sections 10.6.6 and 10.6.7 of the CSS 2.1 spec, parents do grow to
encompass their children (even floats). Note the last paragragh of 10.6.7

Where in the spec does it say that they don't?
Why would section 10.6.6 and section 10.6.7 apply?  In your case, overflow is
visible, display is not inline-block, and the block is not floating (none of the
three conditions that could cause 10.6.7 apply is satisfied).  So the relevant
section is 10.6.3.  See especially the last paragraph of this section.
(In reply to comment #8)
> So the relevant section is 10.6.3.  See especially the last 
> paragraph of this section.

Yep, you're right.
Thanks for the pointer.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: