| <html> |
| <head> |
| <style> |
| #outside { |
| outline: 1px dashed red; |
| width: 600px; |
| } |
| #containingBlock { |
| display: inline; |
| position: relative; |
| background-color: green; |
| margin: 10px; |
| padding: 0 10px; |
| border: 1px solid grey; |
| border-left: 20px solid blue; |
| border-right: 20px solid orange; |
| } |
| #test { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| outline: 5px solid black; |
| } |
| </style> |
| </head> |
| <body> |
| <p>The black outline box should stretch from the left <span style="color: blue;">blue</span> border on the first line, to the right <span style="color: orange;">orange</span> border on the third line.</p> |
| <div id="outside"> |
| ILorem ipsum dolor sit amet, |
| <span id="containingBlock"> |
| con a pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp qui officia deserunt mollit animequs |
| <div id="test"></div> |
| ILOREM ipsum dol sDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat |
| </span> |
| duis aute irure dolor in reprehenderit in voluptate velit. |
| </div> |
| </body> |
| </html> |
