[go: up one dir, main page]

Re: Floater inside of floater sizing

On 18/06/2014 9:21 AM, Bogdan Brinza wrote:
> Another interoperability problem we've uncovered while investigating
> compatibility problems reported to Internet Explorer. This was found
> on few internal sites, but should affect every site with same
> combination, and we expect this is pretty common:
>
> Consider the following reduction:
> http://jsfiddle.net/boggydigital/6M2yu/
>
> If a floater contains inline-block element and a floater next to it -
> Chrome would break the line after the first element and sizes
> container as if line break didn't happen, even though there should be
> enough space to fit the child floating element without breaking the
> line.
>
> Internet Explorer and Firefox fit both elements without a line break.
> Is this the expected behavior?

Yes or no  ... depends on which UA you are inquiring about. :-)

Internet Explorer and Firefox are showing this correctly to my 
understanding of the spec. I will add that this interoperability issue 
is not just confined to a float and inline-block element inside another 
float. Please see this test case (code is copied below).

http://css-class.com/test/temp/float-with-inline-block.htm

Note that the parent can either be a float or a block-level element with 
a declared width that equals the combined width of the floated child and 
inline-block child. In this construct, the interoperability issue only 
happens when the floated child is after the inline-block child in the 
source.

I will say that similar constructs may show the same interoperability 
issues.

Alan


<!DOCTYPE html>

<style type="text/css">
.container1 {
      float: left;
      background-color: red;
      margin-bottom: 20px;
  }
.container2 {
      background-color: red;
      width: 400px;
      margin-bottom: 20px;
  }

.float-child {
      float: left;
      width: 200px;
      background-color: green;
         }
.inline-block {
      display: inline-block;
      width:  200px;
      background-color: blue;
}
hr { clear: both; margin-top: 20px; }
</style>


     <div class="container1">
         <div class="inline-block">inline-block (1)</div>
         <div class="float-child">float-child (2)</div>
     </div>

<hr>

     <div class="container1">
         <div class="float-child">float-child (1)</div>
         <div class="inline-block">inline-block (2)</div>
     </div>


<hr>


     <div class="container2">
         <div class="inline-block">inline-block (1)</div>
         <div class="float-child">float-child (2)</div>
     </div>

<hr>

     <div class="container2">
         <div class="float-child">float-child (1)</div>
         <div class="inline-block">inline-block (2)</div>
     </div>


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

Received on Wednesday, 18 June 2014 13:17:37 UTC