splitter

<body onload="init();">
  <div id="div1"></div>
  <div id="splitter"></div>
  <div id="div2"></div>
</body>

<style type="text/css">
body
{
  margin:0;
  padding:0;
}
#div1
{
  width:45%;
  background-color:#220000;
  float:left;
  height:100%;
  position:absolute;
}
#div2
{
  width:15%;
  background-color:#000022;
  float:left;
  height:100%;
  position:absolute;
}
#splitter
{
  width:10px;
  background-color:#002200;
  float:left;
  height:100%;
  position:absolute;
  cursor:w-resize;
}
</style>

<script type="text/javascript">
var splitter,cont1,cont2;
var last_x,window_width;

function init()
{
  window_width=window.innerWidth;
  splitter=document.getElementById("splitter");
  cont1=document.getElementById("div1");
  cont2=document.getElementById("div2");
  var dx=cont1.clientWidth;
  splitter.style.marginLeft=dx+"px";
  dx+=splitter.clientWidth;
  cont2.style.marginLeft=dx+"px";
  dx=window_width-dx;
  cont2.style.width=dx+"px";
  splitter.addEventListener("mousedown",spMouseDown);
}

function spMouseDown(e)
{
  splitter.removeEventListener("mousedown",spMouseDown);
  window.addEventListener("mousemove",spMouseMove);
  window.addEventListener("mouseup",spMouseUp);
  last_x=e.clientX;
}

function spMouseUp(e)
{
  window.removeEventListener("mousemove",spMouseMove);
  window.removeEventListener("mouseup",spMouseUp);
  splitter.addEventListener("mousedown",spMouseDown);
  resetPosition(last_x);
}

function spMouseMove(e)
{
  resetPosition(e.clientX);
}

function resetPosition(nowX)
{
  var dx=nowX-last_x;
  dx+=cont1.clientWidth;
  cont1.style.width=dx+"px";
  splitter.style.marginLeft=dx+"px";
  dx+=splitter.clientWidth;
  cont2.style.marginLeft=dx+"px";
  dx=window_width-dx;
  cont2.style.width=dx+"px";
  last_x=nowX;
}
</script>