blob: bc3f5db9665c5280814aee93c2d39ac4e1f52129 [file] [log] [blame]
<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>