| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/st
rict.dtd"> | |
| 2 <html> | |
| 3 <head> | |
| 4 <title>CSS Test: Absolutely positioned non-replaced elements with 'margi
n-left' and 'margin-right' set to 'auto'</title> | |
| 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> | |
| 6 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-r
eplaced-width"> | |
| 7 <meta name="flags" content="ahem"> | |
| 8 <script src="../../resources/ahem.js"></script> | |
| 9 <meta name="assert" content="When 'left', 'width' and 'right' are not 'a
uto', set 'margin-left' and 'margin-right' to equal values."> | |
| 10 <style type="text/css"> | |
| 11 #containingblock | |
| 12 { | |
| 13 border: solid black; | |
| 14 height: 2in; | |
| 15 position: relative; | |
| 16 width: 4in; | |
| 17 } | |
| 18 div div | |
| 19 { | |
| 20 /* left + margin-left + border-left-width + padding-left + width
+ padding-right + border-right-width + margin-right + right = width of containi
ng block */ | |
| 21 /* 1in + solve + 0 + 0 + 1in
+ 0 + 0 + solve + -2in = 4in */ | |
| 22 background: red; | |
| 23 color: blue; | |
| 24 font: 1in/1em Ahem; | |
| 25 left: 1in; | |
| 26 margin-left: auto; /* value is solved to 2in */ | |
| 27 margin-right: auto; /* value is solved to 2in */ | |
| 28 position: absolute; | |
| 29 right: -2in; | |
| 30 width: 1in; | |
| 31 } | |
| 32 </style> | |
| 33 </head> | |
| 34 <body> | |
| 35 <p>Test passes if the blue square in in the upper-right corner of the bl
ack rectangle and there is no red visible on the page.</p> | |
| 36 <div id="containingblock"> | |
| 37 <div>X</div> | |
| 38 </div> | |
| 39 </body> | |
| 40 </html> | |
| OLD | NEW |