why.not?, да ладно. Вроде бы, именно оно:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Two liquid columns example</title>
<style type="text/css">
.col-wrap1 {
width:25%;
background:url(bg1.png) #fabcbc bottom right no-repeat;
border:10px solid #ee4d4d;
position:relative;
left:7%;
}
.col-wrap2 {
width:200%;
position:relative;
left: 100%;
margin:-10px -200% -10px 50px;
background:url(bg2.png) #d9edfc bottom left no-repeat;
border:10px solid #53c4ff;
}
.col1 {
float:left;
width:50%;
margin-right:-100%;
position:relative;
left:-50%;
margin-left:-60px;
}
.col2-part {
width: 100%;
height: 20%;
position: absolute;
text-align: center;
outline: 1px dotted black;
}
.col2-part-1 {
top: 0;
}
.col2-part-2 {
top: 20%;
}
.col2-part-3 {
top: 40%;
}
.col2-part-4 {
top: 60%;
}
.col2-part-5 {
top: 80%;
}
.col-wrap1, .col-wrap2, .col2-part {
-moz-border-radius:20px;
-webkit-border-radius:20px;
}
.content {
padding:20px;
}
p {
margin-top:0;
}
.clear {
clear:both;
font-size:0;
overflow:hidden;
}
</style>
</head><body>
<div class="col-wrap1">
<div class="col-wrap2">
<div class="col1">
<div class="content" id="c1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
adipiscing nibh non purus suscipit venenatis. Maecenas egestas, neque a
iaculis tristique, purus eros laoreet ligula, id venenatis erat purus
vitae justo. Sed ac pellentesque magna. Cras faucibus metus vel velit
gravida blandit. Etiam aliquet ligula non enim sagittis vehicula. Donec
fringilla, erat et semper eleifend, justo quam sodales tellus, a
vehicula ipsum libero eget mi. Integer condimentum, nibh aliquet
adipiscing scelerisque, nisl magna accumsan arcu, nec vehicula magna
mauris interdum elit. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Praesent volutpat dapibus lorem.</p>
<input value="Add text" onclick="addText('c1')" type="button">
</div>
</div>
<div class="col2">
<div class="col2-part col2-part-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
adipiscing nibh non purus suscipit venenatis. Maecenas egestas, neque a
iaculis tristique, purus eros laoreet ligula, id venenatis erat purus</div>
<div class="col2-part col2-part-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
adipiscing nibh non purus suscipit venenatis. Maecenas egestas, neque a
iaculis tristique, purus eros laoreet ligula, id venenatis erat purus</div>
<div class="col2-part col2-part-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
adipiscing nibh non purus suscipit venenatis. Maecenas egestas, neque a
iaculis tristique, purus eros laoreet ligula, id venenatis erat purus</div>
<div class="col2-part col2-part-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
adipiscing nibh non purus suscipit venenatis. Maecenas egestas, neque a
iaculis tristique, purus eros laoreet ligula, id venenatis erat purus</div>
<div class="col2-part col2-part-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
adipiscing nibh non purus suscipit venenatis. Maecenas egestas, neque a
iaculis tristique, purus eros laoreet ligula, id venenatis erat purus</div>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript">
function addText(id) {
var container = document.getElementById(id);
var para = container.getElementsByTagName('p')[0];
container.insertBefore(para.cloneNode(true), container.firstChild);
}
</script>
</body></html>