grid-floats-no-intrude-002-ref.html (1063B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="stylesheet" href="/css/support/grid.css"> 5 <style> 6 .cell { 7 width: 50px; 8 height: auto; 9 min-height: 50px 10 } 11 12 .invisibleFont { 13 color: lime; 14 } 15 16 .floatLeft { 17 float: left; 18 } 19 20 .clearLeft { 21 clear: left; 22 } 23 24 .relative { 25 position: relative; 26 } 27 </style> 28 </head> 29 30 <body> 31 32 <div>This test checks that grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item ('Float' text shouldn't overflow the first row).</div> 33 34 <div> 35 <div class="cell relative floatLeft firstRowFirstColumn"> 36 <div>Float</div> 37 <div>Float</div> 38 <div>Float</div> 39 <div>Float</div> 40 </div> 41 <div class="cell floatLeft firstRowSecondColumn"> 42 <div class="invisibleFont">Float</div> 43 <div class="invisibleFont">Float</div> 44 <div class="invisibleFont">Float</div> 45 <div class="invisibleFont">Float</div> 46 </div> 47 <div class="cell floatLeft clearLeft secondRowFirstColumn"></div> 48 <div class="cell floatLeft secondRowSecondColumn"></div> 49 </div> 50 51 </body> 52 </html>