左右两栏布局右侧自适应+左右拖动改变两栏宽度

今天一下午的学习成果，分享一下，欢迎高手指教。
首先是布局，左右两栏布局，中间留出可拖动的地方。布局很简单，左边一个div，右边一个div，中间的div是用来拖动的。

复制代码代码如下:







左侧内容


右侧内容




css布局：采用固定绝对定位，并定下坐标的方法，我感觉这种方法比较笨的，水平有限。

复制代码代码如下:
div,body,html{margin:0; padding:0; width:100%;}
#left,#right,#middle{ height:300px; position:absolute;}
#left{width:300px; background:#ccc;}
#middle{ width:9px; background:#666;left:300px;}
#middle:hover{ cursor:w-resize;}
#right{right:0; background:#ccc; left:309px; width:auto;}

最后的js实现中间栏的拖动效果：

复制代码代码如下:
　　　　function $(id) {
return document.getElementById(id)
}
window.onload = function() {
left = $("left"), right = $("right"), middle = $("middle");
var middleWidth=9;
middle.onmousedown = function(e) {
var disX = (e || event).clientX;
middle.left = middle.offsetLeft;
document.onmousemove = function(e) {
var iT = middle.left + ((e || event).clientX - disX);
var e=e||window.event,tarnameb=e.target||e.srcElement;
maxT=document.body.clientWidth;
iT < 0 && (iT = 0);
iT > maxT && (iT = maxT);
middle.style.left = left.style.width = iT + "px";
right.style.width = document.body.clientWidth - iT -middleWidth + "px";
right.style.left = iT+middleWidth+"px";
return false
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
middle.releaseCapture && middle.releaseCapture()
};
middle.setCapture && middle.setCapture();
return false
};
};