percent-width-child-ref.html (871B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <style> 9 div.button { 10 display: inline-block; 11 border: 0; 12 padding: 0; 13 14 font: 10px sans-serif; 15 text-align: center; 16 vertical-align: top; 17 18 color: black; 19 background: gray; 20 } 21 22 div.p80 { 23 width: 80%; 24 background: pink; 25 } 26 27 div.p100 { 28 width: 100%; 29 background: yellow; 30 } 31 </style> 32 </head> 33 <body> 34 <!--Button has explicit width for us to resolve against: --> 35 <div class="button" style="width: 100px"> 36 <div class="p80">abc</div> 37 </div> 38 39 <div class="button" style="width: 100px"> 40 <div class="p100">abc</div> 41 </div> 42 43 <!--Button is using intrinsic width: --> 44 <div class="button"> 45 <div class="p80">abc</div> 46 </div> 47 48 <div class="button"> 49 <div class="p100">abc</div> 50 </div> 51 52 </body> 53 </html>