block-min-height-001b-ref.html (972B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Reference: min-height block fragmentation</title> 5 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 6 <style> 7 html,body { 8 color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; 9 width: 300px; 10 } 11 .columns { 12 columns: 3; 13 background: grey; 14 margin-bottom: 1em; 15 } 16 .columns > div { 17 height: 172px; 18 background: yellow; 19 border: solid; 20 border-width:10px 0 6px 0; 21 padding: 5px 0 3px 0; 22 } 23 .columns > div > div { height:150px; width:50px; border:solid; } 24 </style> 25 </head> 26 <body> 27 <div class="columns"> 28 BEFORE 29 <div> 30 <div></div> 31 </div> 32 AFTER 33 </div> 34 <div class="columns" style="height:100px"> 35 BEFORE 36 <div> 37 <div></div> 38 </div> 39 AFTER 40 </div> 41 <div class="columns" style="height:70px"> 42 BEFORE 43 <div> 44 <div></div> 45 </div> 46 AFTER 47 </div> 48 <div class="columns" style="height:50px"> 49 BEFORE 50 <div> 51 <div></div> 52 </div> 53 AFTER 54 </div> 55 </body> 56 </html>