Edit in JSFiddle

<div id="content">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#content {
    position: relative;
    height: 100%;
}

#left, #right {
    float: left;
    width: 50%;
    height: 100%; 
    overflow: auto;
}

#left {
    background: #fee;
}
#right {
    background: #efe;
}

#divider {
    position: absolute;
    width: 2px;
    margin-left: -2px;
    top: 0;
    bottom: 0;
    background: #bbb;
    border: 1px outset #bbb;
    border-top: 0;
    border-bottom: 0;
    cursor: col-resize;
}

html.dragging * {
    cursor: col-resize !important;
}

var content = document.getElementById('content');
var left = document.getElementById('left');
var right = document.getElementById('right');
var divider = document.createElement('div');
divider.id = 'divider';
content.appendChild(divider);

var leftPercent = 50;

function updateDivision() {
    divider.style.left = leftPercent + '%';
    left.style.width = leftPercent + '%';
    right.style.width = (100 - leftPercent) + '%';
}

updateDivision();

divider.addEventListener('mousedown', function(e) {
    e.preventDefault();
    var lastX = e.pageX;
    document.documentElement.className += ' dragging';
    document.documentElement.addEventListener('mousemove', moveHandler, true);
    document.documentElement.addEventListener('mouseup', upHandler, true);
    function moveHandler(e) {
        e.preventDefault();
        e.stopPropagation();
        var deltaX = e.pageX - lastX;
        lastX = e.pageX;
        leftPercent += deltaX / parseFloat(document.defaultView.getComputedStyle(content).width) * 100;
        updateDivision();
    }
    function upHandler(e) {
        e.preventDefault();
        e.stopPropagation();
        document.documentElement.className = document.documentElement.className.replace(/\bdragging\b/, '');
        document.documentElement.removeEventListener('mousemove', moveHandler, true);
        document.documentElement.removeEventListener('mouseup', upHandler, true);
    }
}, false);