Width Adjustable 3 Column

by mjain_zonetv

HTML

<div class="container">
    <div id="left"></div>
    <div id="l-handle" class="handle"></div>
    <div id="middle"></div>
    <div id="r-handle" class="handle"></div>
    <div id="right">
    <div id="up">
    hjgcfkhSFADFskhva
    </div>
    <div id="down">
    jhghfk
    </div></div>
</div>

CSS

body {
    padding: 0px;
    margin: 0px;
}
#left, #middle, #right {
    display: inline-block;
    background: #e5e5e5;
    min-height: 700px;
    margin: 0px;
    vertical-align: top;
    word-break: break-word;
}
#up {
    display: block;
    background:red;
    min-height: 200px;
    margin: 0px;
    border: .5;
    vertical-align: left;
    word-break: break-word;
}
 #down {
    display: block;
    background:green;
    min-height: 200px;
    margin: 0px;
    border: .5;
    vertical-align: left;
    word-break: break-word;
}
#l-handle, #r-handle {
    display: inline-block;
    background: #000;
    width: 2px;
    min-height: 200px;
    cursor: col-resize;
    margin: 0px;
}

JavaScript

var isDragging = false,
	cWidth = $('.container').width(),
	sPos,
    handle,
    tWidth;
$('#left, #middle, #right').width((cWidth / 3) - 7);

$('.handle').on('mousedown', function(e){
	isDragging = true;
    sPos = e.pageX;
    handle = $(this);
    tWidth = handle.prev().width() + handle.next().width();
});

$(window).on('mouseup', function(e){
	isDragging = false;
});

$('.container').on('mousemove', function(e){
    var cPos = sPos - e.pageX;
	if(isDragging && ((tWidth - handle.next().width()) - cPos) <= tWidth){
        handle.prev().width((tWidth - handle.next().width()) - cPos);
        handle.next().width(tWidth - handle.prev().width());
        sPos = e.pageX;
    }
});