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

Re: Issue 101 Resolution

From: Alan Gresley <alan@css-class.com>
Date: Thu, 07 Oct 2010 00:59:58 +1100
Message-ID: <4CAC80DE.6000007@css-class.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: www-style list <www-style@w3.org>
Tab Atkins Jr. wrote:
> I don't understand what you mean.  Take the first broken testcase for rule 3:
> <!doctype html>
> <div id=container>
>  <div id=rightfloat></div>
>  <div id=leftparent>
>    <div id=leftfloat></div>
>  </div>
> </div>
> <style>
> #container {
>  width: 600px;
>  height: 400px;
>  background: yellow;
> }
> #rightfloat {
>  width: 200px;
>  height: 100px;
>  background: green;
>  float: right;
> }
> #leftfloat {
>  width: 450px;
>  height: 100px;
>  background: blue;
>  float: left;
> }
> #leftparent {
>  width: 390px;
>  height: 250px;
>  border: 3px dotted black;
> }
> </style>
> "getComputedStyle(document.getElementById('leftfloat')).marginRight"
> return "0px", exactly as it should.  The computed value of the right
> margin is definitely not negative.  (Neither is the left margin, for
> that matter.)

Sorry Tab, I got it all wrong. So in Gecko, WebKit and Opera, the 
outer left edge of div#rightfloat is only responding to the outer 
right edge of the sibling and parent div#leftparent and since 
div#leftfloat is larger than it's parent, it (overflows) layers above 
div#rightfloat. If div#leftparent doesn't have a width or its' width 
is equal to div#leftfloat, there is no overflow.

In IE8 and IE9 beta, rule 3 is followed.

If we had the below, Gecko and Opera shows the div#leftfloat layering 
over div#rightfloat. WebKit shows the reverse (div#rightfloat highest) 
and IE8 and IE9 beta shows the layout very different due to a line box.

<!doctype html>
<div id=wrapper>
  <div id=rightfloat></div>
  <div id=container>
   <div id=leftparent>
    <div id=leftfloat>According to CSS 2.1, the top of this float 
should be just below the bottom of the right float.</div>
    some text

#wrapper {
  width: 300px;
  height: 400px;
  background: teal;
#container {
  width: 200px;
  height: 400px;
  background: yellow;
#rightfloat {
  width: 100px;
  height: 100px;
  background: lime;
  float: right;
#leftfloat {
  width: 340px;
  height: 240px;
  float: left;
  border: 5px dashed blue;
#leftparent {
  width: 200px;
  background: orange;
  border-top: 5px dotted black;
  border-bottom: 5px dotted black;

Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Wednesday, 6 October 2010 14:27:11 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:39 UTC