| <!DOCTYPE html> |
| <!-- |
| | When values are over-constrained: |
| | If the 'direction' property of the containing block has the value 'ltr', |
| | the specified value of 'margin-right' is ignored and the value is calculated |
| | so as to make the equality true. If the value of 'direction' is 'rtl', this |
| | happens to 'margin-left' instead. |
| | https://www.w3.org/TR/CSS21/visudet.html#blockwidth |
| --> |
| <html> |
| <head> |
| <style> |
| .containing-block { |
| background-color: #000000; |
| width: 300px; |
| height: 90px; |
| margin: 5px; |
| } |
| .red { |
| width: 50px; |
| height: 30px; |
| background-color: #800000; |
| } |
| .green { |
| width: 50px; |
| height: 30px; |
| background-color: #008000; |
| } |
| .blue { |
| width: 50px; |
| height: 30px; |
| background-color: #000080; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="containing-block"> |
| <div class="red" dir="rtl"></div> |
| <div class="green" dir="ltr"></div> |
| <div class="blue"></div> |
| </div> |
| <div class="containing-block" dir="ltr"> |
| <div class="red" dir="rtl"></div> |
| <div class="green" dir="ltr"></div> |
| <div class="blue"></div> |
| </div> |
| <div class="containing-block" dir="rtl"> |
| <div class="red" dir="rtl"></div> |
| <div class="green" dir="ltr"></div> |
| <div class="blue"></div> |
| </div> |
| </body> |
| </html> |
