W3C home > Mailing lists > Public > www-style@w3.org > October 2010

Re: Issue 101 Resolution

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 5 Oct 2010 17:19:00 -0700
Message-ID: <AANLkTimM7eax_MZBkzXoJ1d1W8vwDD6FA8z=4op5z-XE@mail.gmail.com>
To: www-style list <www-style@w3.org>
Rule 7 - Summary of the Problem
===============================

Same as with rule 3, it appears that all browsers only consider floats
that are both in the same BFC and that intersect the float's parent

Testcases
=========

Basic behavior, correct per spec in all browsers:

<!doctype html>
<div id=container>
  <div id=leftfloat1></div>
  <div id=parent>
    <div id=leftfloat2></div>
  </div>
</div>
<style>
#container {
  width: 400px;
  height: 400px;
  background: yellow;
}
#leftfloat1 {
  width: 100px;
  height: 100px;
  background: green;
  float: left;
}

#leftfloat2 {
  width: 350px;
  height: 100px;
  background: blue;
  float: left;
}
#parent {
  width: 320px;
  height: 250px;
  margin-left: auto;
  border: 3px dotted black;
}
</style>

Incorrect behavior, consistent in all browsers:

<!doctype html>
<div id=container>
  <div id=leftfloat1></div>
  <div id=parent>
    <div id=leftfloat2></div>
  </div>
</div>
<style>
#container {
  width: 400px;
  height: 400px;
  background: yellow;
}
#leftfloat1 {
  width: 100px;
  height: 100px;
  background: green;
  float: left;
}

#leftfloat2 {
  width: 350px;
  height: 100px;
  background: blue;
  float: left;
}
#parent {
  width: 280px;
  height: 250px;
  margin-left: auto;
  border: 3px dotted black;
}
</style>

A final case demonstrating that only the parent matters:

<!doctype html>
<div id=container>
  <div id=leftfloat1></div>
  <div id=grandparent>
    <div id=parent>
      <div id=leftfloat2></div>
    </div>
  </div>
</div>
<style>
#container {
  width: 400px;
  height: 400px;
  background: yellow;
}
#leftfloat1 {
  width: 100px;
  height: 100px;
  background: green;
  float: left;
}

#leftfloat2 {
  width: 350px;
  height: 100px;
  background: blue;
  float: left;
}
#parent {
  width: 280px;
  height: 250px;
  margin-left: auto;
  border: 3px dotted black;
}
#grandparent {
  width: 320px;
  height: 300px;
  margin-left: auto;
  border: 3px dashed gray;
}
</style>


Suggested Change
================

Current text:

# A left-floating box that has another left-floating
# box to its left may not have its right outer edge
# to the right of its containing block's right edge.
# (Loosely: a left float may not stick out at the
# right edge, unless it is already as far to the left
# as possible.) An analogous rule holds for
# right-floating elements.

Suggested text:

| A left-floating box that has another left-floating
| box to its left, where the latter box's right edge
| is to the right of the original left-floating box's
| parent box's left edge, may not have its right outer
| edge to the right of its containing block's right
| edge. (Loosely: a left float may not stick out at
| the right edge, unless it is already as far to the
| left as possible.) An analogous rule holds for
| right-floating elements.

~TJ
Received on Wednesday, 6 October 2010 00:44:13 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:32 GMT