I prefer to use as few <div>s as possible.
<div class="container">
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
</div>
.container{
padding: 30px 30px 0;
position: relative;
width: 240px;
height: 170px;
border:1px solid #000;
overflow: hidden;
}
.container:after{
content: ' ';
display: block;
background-color: red;
height: 30px;
width: 100%;
position: absolute;
bottom: 0;
}
http://jsfiddle.net/bgaR9/
naturally in a world without IE < 9