intrinsic-percent-non-replaced-002-ref.html (1640B)
1 <!DOCTYPE html> 2 <title>Reference</title> 3 4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 5 <style> 6 /* establish context */ 7 .container { 8 clear: both; 9 padding: 10px; 10 color: blue; 11 font: 20px/1 Ahem; 12 } 13 .zero { 14 width: 0; 15 } 16 .infinite { 17 width: 400px; /* close enough */ 18 } 19 20 /* visualize size contribution */ 21 .container > div { 22 float: left; /* shrinkwrap */ 23 border: solid orange 20px; 24 border-style: none solid; 25 } 26 .container > div > div { 27 border-right: solid 20px aqua; 28 } 29 30 /* controls for width, max-width */ 31 /* content = 100% = 80px = 4ch + border */ 32 /* choose sizes that are larger than content to see if how they take effect */ 33 .control { 34 width: 60px; 35 } 36 .raw-percent, 37 .calc-percent { 38 width: 40px; 39 margin-right: 20px; 40 } 41 .no-percent { 42 width: 40px; 43 } 44 </style> 45 46 <!-- calculating min-content widths --> 47 <div class='zero container'> 48 <div><div class="control">ppp pp</div></div> 49 </div> 50 <div class='zero container'> 51 <div><div class="raw-percent">ppp pp</div></div> 52 </div> 53 <div class='zero container'> 54 <div><div class="calc-percent">ppp pp</div></div> 55 </div> 56 <div class='zero container'> 57 <div><div class="no-percent">ppp pp</div></div> 58 </div> 59 60 <!-- calculating max-content widths --> 61 <div class='infinite container'> 62 <div><div class="control">p p</div></div> 63 </div> 64 <div class='infinite container'> 65 <div><div class="raw-percent">p p</div></div> 66 </div> 67 <div class='infinite container'> 68 <div><div class="calc-percent">p p</div></div> 69 </div> 70 <div class='infinite container'> 71 <div><div class="no-percent">p p</div></div> 72 </div>