想改改这个代码,从右向左拉,DIV的大小也变.

写得不好,现在变得一塌糊涂:
 <!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial;
font-size: 12px;
color: #000000;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<script>
var isIE = /msie/i.test(navigator.userAgent);
var isFF = /firefox/i.test(navigator.userAgent);
var detlaX,detlaY,ooo;
function $(){
return document.getElementById(arguments[0])
}
function beginDrag(me,evt){
e = evt || window.event;
ooo = me;
document.onmousemove = move;
document.onmouseup = up;
if(isIE)me.setCapture();   
if(isFF)window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}
function move(evt){
e = evt || window.event;
//$("colleft").innerHTML=e.clientX
$("colleft").style.width=(e.clientX-25)+"px"
$("colleft").style.width=($("thetable").offsetWidth-(e.clientX-25)-$("colleft").offsetWidth)+"px"
}
function up(){
document.onmousemove = null;
document.onmouseup = null;
if(isIE)ooo.releaseCapture(); 
if(isFF)window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
</script></head><body><table width="1060" border="0" align="center">
  <tr>
    <td><img src="images/ENTWURF5_01.gif" width="1060" height="31" alt="" /></td>
  </tr>
</table>
<table width="1000" border="0" align="center">
  <tr>
    <td width="180" valign="top"><div id=year >
      <table width="170" height="620" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#A0A0A0">
        <tr>
          <td valign="top" bgcolor="#FFFFFF"><table width="100%" height="300" border="0">
              <tr>
                <td>&nbsp;</td>
              </tr>
            </table>
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td><img src="images/new11.gif" width="170" height="16" /><br />
                      <img src="images/new10.gif" width="170" height="45" /></td>
                </tr>
                <tr>
                  <td><img src="images/new10.gif" width="170" height="45" /></td>
                </tr>
                <tr>
                  <td><img src="images/new10.gif" width="170" height="45" /></td>
                </tr>
                <tr>
                  <td><img src="images/new10.gif" width="170" height="45" /></td>
                </tr>
                <tr>
                  <td><img src="images/new10.gif" width="170" height="45" /></td>
                </tr>
                <tr>
                  <td><img src="images/new10.gif" width="170" height="45" /></td>
                </tr>
                <tr>
                  <td><img src="images/new10.gif" width="170" height="45" /></td>
                </tr>
            </table></td>
        </tr>
      </table>
    </div></td>
      <TD    id=colmid width=5><IMG 
      alt="" src="images/c.gif" width=5 border=0>    </TD>
    <td width="700" valign="top"><div  id=colright >
      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
        <tr>
          <td height="25" bgcolor="#EAE9E5">&nbsp;</td>
        </tr>
        <tr>
          <td height="564" bgcolor="#FFFFFF">&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#EAE9E5"><img src="images/new2.gif" width="696" height="27" /></td>
        </tr>
      </table>
      <map name="MapMap" id="MapMap">
        <area shape="rect" coords="664,4,694,28" href="#"  onclick="window.close()"/>
      </map>
    </div></td>
    <TD onMouseUp="return CM.mouseup();" 
    id=colmid 
    onmouseover=CM.mouseover(this) onmouseout=CM.mouseout(this) width=5 onMouseDown="beginDrag(this,event);"><IMG 
      alt="" src="images/c.gif" width=5 border=0> </TD>
    <td valign="top"><div id="colleft">
      <form id="form1" name="form1" method="post" action="" style="display:display">
        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#C5C5C3">
          <tr>
            <td height="32" bgcolor="#EAE9E5"><table width="95%" border="0" align="center">
                <tr>
                  <td><label>
                    <input name="textfield" type="text" size="18" />
                  </label></td>
                  <td><img src="images/search.jpg" width="19" height="17" /></td>
                </tr>
            </table></td>
          </tr>
          <tr>
            <td height="270" bgcolor="#FFFFFF">&nbsp;</td>
          </tr>
        </table>
      </form>
      <table width="100%" height="200" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#C5C5C3">
        <tr>
          <td height="32" bgcolor="#EAE9E5">&nbsp;</td>
        </tr>
        <tr>
          <td height="270" bgcolor="#FFFFFF">&nbsp;</td>
        </tr>
      </table>
    </div></td>
  </tr>
</table>
<map name="Map" id="Map"><area shape="rect" coords="664,4,694,28" href="#"  onclick="window.close()"/></map></body>
</html>