<table contentEditable><tr>
<td><div styel="width:100%;"></div></td>
<td><div styel="width:100%;"></div></td>
<td><div styel="width:100%;"></div></td>
</tr></table>
<td><div styel="width:100%;"></div></td>
<td><div styel="width:100%;"></div></td>
<td><div styel="width:100%;"></div></td>
</tr></table>
#left,#right{
width:300px;
float:left;
border:1px solid #000;
height:400px;
}
#bar{
float:left;
width:10px;
height:400px;
background:#000;
}
</style>
<body>
<div id="left">left DIV</div>
<div id="bar"></div>
<div id="right">right DIV</div>
</body>
<script language="javascript">
var l = document.getElementById("left");
var r = document.getElementById("right");
var bar = document.getElementById("bar");
var move=false;
var offsetL,offsetR,LlastWidth,RlastWidth;
var leftL = getLeft( l );
var rightL = getLeft( r ) + r.offsetWidth;bar.onmouseover=function(){
this.style.cursor = "col-resize";
}
bar.onmouseout=function(){
this.style.cursor = "default";
}
bar.onmousedown=function(){
this.setCapture();
move=true;
offsetL = event.offsetX;
offsetR = this.offsetWidth - offsetL;
//alert( "event.x="+event.offsetX );}
bar.onmousemove=function(){
if( !move ) return;
left.style.width = event.x - leftL - offsetL + "px";
right.style.width = rightL - event.x - offsetR + "px";
}
bar.onmouseup = function(){
this.releaseCapture();
move = false;
}
function getLeft(e)
{
var l = e.offsetLeft;
while(e=e.offsetParent)l+=e.offsetLeft;
return l;
}
</script>