[CSS21] Left float later in source does not clear right float due to nesting of containing block

Hello,

I have been reviewing some old offline bug folders and found an old test 
case.

http://css-class.com/test/css/box/floats/containing-block2.htm

All UAs tested (IE10, Opera 12.14, FF23 and Chrome 28) will show fine if 
the inner parent (see id=leftparent) in normal flow does not have a 
fixed width.

If the inner parent in normal flow does have a fixed width, I believe 
that only IE10 shows the test case correctly.

FF and Opera shows the same regardless of if the inner parent has a 
width or auto width.

Chrome does not like the test case so it paints the right float above 
the text that is contained within the next float in the source.

Are my conclusions correct? Does IE10 do right in respects to the spec?

Alan

<!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 (blue 
dashed border) should be positioned below the bottom edge of the right 
float (lime background).</div>
    some text
   </div>
  </div>
</div>

  <style>
#wrapper {
  width: 300px;
  height: 400px;
  background: teal;
}
#container {
  width: 200px;
  height: 400px;
  background: yellow;
}
#rightfloat {
  float: right;
  width: 100px;
  height: 100px;
  background: lime;
}
#leftfloat {
  float: left;
  width: 340px;
  height: 240px;
  border: 5px dashed blue;
  background: rgba(255,255,255,0.5);
}
#leftparent {
  background: orange;
  border-top: 5px dotted black;
  border-bottom: 5px dotted black;
}
</style>


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Thursday, 22 August 2013 08:48:53 UTC