<HTML> 
<HEAD> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<TITLE> New Document </TITLE> 
<style>  
  #leftDiv,#rightDiv{  
  width:300px;  
  float:left;  
  border:1px  solid  #000;  
  height:400px;  
  }  
  #barDiv{  
  float:left;  
  width:10px;  
  height:400px;  
  background:#000;  
  }  
</style> 
<script type="text/javascript">function onLoadPage()
{
  var l = document.getElementById("leftDiv");  
  var r = document.getElementById("rightDiv");  
  var bar = document.getElementById("barDiv");  
  var move=false;  
  var offsetL,offsetR,LlastWidth,RlastWidth;  
  var leftL = getLeft(l);  
  
  alert("l=" + l);
  var rightL = getLeft(r)  +  r.offsetWidth;  
  var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE 
  var ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox 
  bar.onmouseover=function(){  
  this.style.cursor  =  "col-resize";  
  }  
  bar.onmouseout=function(){  
  this.style.cursor  =  "default";  
  }  
  bar.onmousedown=function(e){  
      
      move=true; 
    e= e || window.event;  
      if(ff) 
      {        
        var mousePos =mouseCoords(e); 
        //layerX鼠标位置。 
        offsetL = e.clientX - mousePos.x; 
        offsetR = this.offsetWidth  -  offsetL; 
        /* 
        if(document.documentElement.scrollTop > 0) 
        { 
        y = evt.layerY - document.documentElement.scrollTop; 
        } 
        if(document.documentElement.scrollLeft > 0) 
        { 
        x = evt.layerX - document.documentElement.scrollLeft; 
        } 
        */ 
      } 
      if(ie) 
      { 
          this.setCapture(); 
          offsetL  =  e.offsetX;  
          offsetR  =  this.offsetWidth  -  offsetL;  
      } 
      
      
  } 
  
  bar.onmousemove=function(e){  
      if(move == false)  return;  
      e= e || window.event;  
      var mX = e.x ? e.x : e.pageX; 
      var mousePos =mouseCoords(e); 
  var left = document.getElementById("leftDiv");
  var right = document.getElementById("rightDiv");
      left.style.width    = mousePos.x  -  leftL  -  offsetL  +  "px";  
      right.style.width  =  rightL  -  mousePos.x  -  offsetR  +  "px"; 
  
  }  
  bar.onmouseup  =  function(){  
      this.releaseCapture();  
      move  =  false;  
  }  
  function  getLeft(leftDiv)  
  {  
  var divLeft  =  document.getElementById("leftDiv");      var  l  =  divLeft.offsetLeft;  
  alert(l);
      while(divLeft=divLeft.offsetParent)l+=divLeft.offsetLeft;  
      return  l;  
  }  
  function mouseCoords(ev){ 
    if(ev.pageX || ev.pageY){ 
        return {x:ev.pageX, y:ev.pageY}; 
    } 
    return { 
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
        y:ev.clientY + document.body.scrollTop - document.body.clientTop 
    }; 
  } 
}function testClick()
{
var divTest = document.getElementById("test");
alert("divTest="+divTest);
}
</script>
</HEAD> <BODY onLoad="onLoadPage();"> 
<table>
<tr>
<td>
  <div id="leftDiv">left  DIV </div>  
  <div id="barDiv"> </div>  
  <div id="rightDiv">right  DIV </div>  
   </td>
</tr>
<tr><td><a href="#" onClick="testClick();"> <div id="test">for the test</div></a></td></tr>
</table>
</BODY> 
</HTML>