embedded-doc-abs-pos-non-replaced-icb-vlr-021.html (2077B)
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-vlr-021 in 'writing-mode: vertical-rl'</title> 10 11 <!-- 12 position absolute and 'vertical-rl' - 'left' is 'auto', 'width' and 'right' are not 'auto' with 'direction: rtl' in initial containing block 13 --> 14 15 <style type="text/css"> 16 html 17 { 18 direction: rtl; 19 } 20 21 div 22 { 23 background-color: green; 24 border-left: green solid 35px; 25 border-right: green solid 15px; 26 height: 100px; 27 left: auto; 28 position: absolute; 29 right: 80%; 30 top: 0px; 31 width: 50px; 32 writing-mode: vertical-lr; 33 } 34 35 /* 36 " 37 4. [If] 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left' 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 auto : left 45 + 46 0px : margin-left 47 + 48 35px : border-left-width 49 + 50 0px : padding-left 51 + 52 50px : width 53 + 54 0px : padding-right 55 + 56 15px : border-right-width 57 + 58 0px : margin-right 59 + 60 80% : right 61 ==================== 62 500px : width of containing block (width of Initial Containing Block) 63 64 becomes 65 66 (solve) : left 67 + 68 0px : margin-left 69 + 70 35px : border-left-width 71 + 72 0px : padding-left 73 + 74 50px : width 75 + 76 0px : padding-right 77 + 78 15px : border-right-width 79 + 80 0px : margin-right 81 + 82 400px : right (80% of 500px == 400px) 83 ==================== 84 500px : width of containing block (width of Initial Containing Block) 85 86 so used left offset value must be 0px . 87 88 */ 89 </style> 90 </head> 91 92 <body> 93 94 <div></div> 95 96 </body> 97 </html>