embedded-doc-abs-pos-non-replaced-icb-vrl-026.html (2091B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 3 <html> 4 5 <head> 6 7 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 8 9 <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-026 in 'writing-mode: vertical-rl'</title> 10 11 <!-- 12 position absolute and 'vertical-rl' - 'right' is 'auto', 'left' and 'width' are not 'auto' with 'direction: ltr' in initial containing block 13 --> 14 15 <style type="text/css"> 16 html 17 { 18 direction: ltr; 19 } 20 21 div 22 { 23 background-color: green; 24 border-left: green none 0px; 25 border-right: green none 0px; 26 height: 100px; 27 left: 60%; 28 position: absolute; 29 right: auto; 30 top: 0px; 31 width: 20%; 32 writing-mode: vertical-rl; 33 } 34 35 /* 36 " 37 6. [If] 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right' 38 " 39 10.3.7 Absolutely positioned, non-replaced elements 40 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width 41 42 So: 43 44 60% : left 45 + 46 0px : margin-left 47 + 48 0px : border-left-width 49 + 50 0px : padding-left 51 + 52 20% : width 53 + 54 0px : padding-right 55 + 56 0px : border-right-width 57 + 58 0px : margin-right 59 + 60 auto : right 61 ==================== 62 500px : width of containing block (width of Initial Containing Block) 63 64 becomes 65 66 300px : left (60% of 500px) 67 + 68 0px : margin-left 69 + 70 0px : border-left-width 71 + 72 0px : padding-left 73 + 74 100px : width (20% of 500px == 100px) 75 + 76 0px : padding-right 77 + 78 0px : border-right-width 79 + 80 0px : margin-right 81 + 82 solve : right 83 ==================== 84 500px : width of containing block (width of Initial Containing Block) 85 86 so used right offset value must be 100px . 87 88 */ 89 </style> 90 </head> 91 92 <body> 93 94 <div></div> 95 96 </body> 97 </html>