blob: 920d3dd04109e22c7ea298f1dc10777dd8311165 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
#wrapper {
border: 1px solid red;
margin: 20px 0;
width: 200px;
}
#p {
background: #EEE;
border-right: 1px solid green;
margin: 0;
margin-right: 32px;
padding-left: 30px;
}
#float {
position: absolute;
display: inline-block;
width: 25px;
height: 25px;
background-color: green;
margin-left: -30px;
}
#prtl {
background: #EEE;
border-left: 1px solid green;
margin: 0;
margin-left: 32px;
padding-right: 30px;
}
#floatrtl {
position: absolute;
display: inline-block;
width: 25px;
height: 25px;
background-color: green;
margin-right: -30px;
}
</style>
</head>
<body>
<h2>The text should not overflow the green border.</h2>
<div id="wrapper">
<p id="p">
<span id="float"></span>
no sea takimata sanctus estestest Lorem ipsum dolor sit amet.
</p>
</div>
<h2>The text should not overflow the green border.</h2>
<div id="wrapper" style="direction:rtl">
<p id="prtl">
<span id="floatrtl"></span>
no sea takimata sanctus estestest Lorem ipsum dolor sit amet.
</p>
</div>
</body>
</html>