blob: 974cbe77fa5cdc0ee122da372b559006ce9f4786 [file] [log] [blame]
<!doctype html>
<html>
<head>
<style>
html {
font: 16px Times;
}
.content {
padding: 5px;
}
.first-box {
border: 1px solid blue;
padding:5px;
}
.second-box {
border: 1px solid green;
overflow:hidden;
}
#region1, #region2, #region3 {
border: 1px solid black;
}
#region1 {
width: 400px;
height: 150px;
overflow-y: hidden;
}
#region2 {
width: 400px;
height: 150px;
}
#region3 {
width: 400px;
height: 150px;
}
.float { width:30px; height:50px; background-color: lime }
.left { float: left }
.right { float: right }
</style>
</head>
<body>
<p>The first and last lines of text in the regions below should be clipped to the green box. The overflow
section sizes itself and clips differently in each region. The green box should be even with the lime floats at the top of the first region.</p>
<div id="container">
<div id="region1">
<div class="content">
<div class="first-box" style="border-bottom-width:0px;">
<div class="float left" id="float1"></div> <div class="float right" id="float2"></div>
<div class="second-box" style="border-bottom-width: 0px;">
<p>These lines will not spill out of the regions. These lines will not spill out of the regions.
These lines will not spill out of the regions. These lines will not spill out of the regions.</p>
<p style="text-align: justify;">These lines will not spill out of the regions.</p>
</div>
</div>
</div>
</div>
<div id="region2">
<div class="content" style="padding-top:0px;">
<div class="first-box" style="padding-top:0px;border-top-width:0px;">
<div class="second-box" style="padding-top:0px;border-top-width:0px;">
<p style="padding-top:0px;margin-top:0px;">These lines will not spill out of the regions. These lines will not spill out of the regions. These lines will not spill out of the regions. </p>
</div>
</div>
</div>
</div>
<div id="region3"></div>
</div>
<script>
document.body.offsetLeft;
document.getElementById('float1').style.width = '50px';
document.getElementById('float2').style.width = '50px';
</script>
</body>
</html>