| <html> |
| <head> |
| <title>Absolute Position in RTL parent</title> |
| <style> |
| .containingBlock { position: fixed; border: 20px solid black; } |
| #cbOne { width: 200px; height: 300px; } |
| #cbOne > table { direction: rtl; width: 100px; } |
| #cbTwo { width: 300px; height: 200px; left: 300px; } |
| #cbTwo > div { position: relative; direction: rtl; width: 200px; } |
| |
| .box { width: 100px; height: 100px; } |
| #test1 { background: olive; } |
| #test2 { position: absolute; background: green; } |
| #test3 { position: absolute; bottom: 0; right: 100px; background: olive; } |
| </style> |
| </head> |
| <body> |
| <p>On the left, you should see three blocks that are aligned left within a black box. They should |
| be stacked vertically with the green box in between two olive boxes. The olive boxes and the green |
| box should be 100x100, and there should be 100 pixels of padding on the right side of the box stack. |
| </p> |
| <p>On the right, you should see two blocks that are centered within a black box. They should be |
| stacked vertically with the green box below the olive box. The olive box and the green box should |
| be 100x100, and there should be 100 pixels of padding on either side of the box stack. |
| </p> |
| <div id="cbOne" class="containingBlock"> |
| <table cellspacing="0" cellpadding="0"> |
| <tr> |
| <td> |
| <div id="test1" class="box"></div> |
| <div id="test2" class="box"></div> |
| <div id="test3" class="box"></div> |
| </td> |
| </tr> |
| </table> |
| </div> |
| <div id="cbTwo" class="containingBlock"> |
| <div> |
| <div id="test1" class="box"></div> |
| <div id="test2" class="box"></div> |
| </div> |
| </div> |
| </body> |
| </html> |
