<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#box {
width: 50%;
margin: 20px auto;
border: solid red 2px;
overflow: hidden;
position: relative;
}
.col1 {
width: 50%;
background-color: #EEEEEE;
}
.col2 {
position: absolute;
width: 50%;
top: 0px;
left: 50%;
background-color: #CCCCCC;
height: 100%;
overflow-y: auto;
}
</style>
</head>
<body>
some text
<div id='box'>
<div class='col1'>
2 lines, this is 1st<br /> 2nd and <br /> final line
</div>
<div class='col2'>
5 lines, this is 1st<br /> 2nd line (below is hidden)<br /> blah<br />
blah<br /> blah
</div>
</div>
some text
<div id='box'>
<div class='col1'>
2 lines, this is 1st<br /> 2nd and final line
</div>
<div class='col2'>1 line only</div>
</div>
some text
</body>
</html>
【column】
