DIV dynamically resizing using vertical slide

Question

This is a little hard to explain, but I\'m going to do my best:

My webpage is divided using two divs: one floating at left, and other floating at right (50% each one mor

Answer 1

I created this functionality using 15 lines of JS/jQ: http://jsfiddle.net/xSJcz/

Hope it helps! You could easily modify it to respons to click, or similar.

EDIT: For future records, here is the answer's CSS:

#left,#right{
    border:1px solid #aaa;
    float:left;
    height:100px;
    width:48%;
}
#handle{
    background:#000;
    float:left;
    height:100px;
    margin:1px;
    width:1%;
}

HTML:

    Left



    Right

JS:

var h = $('#handle'),
    l = $('#left'),
    r = $('#right'),
    w = $('body').width() - 18;

var isDragging = false;

h.mousedown(function(e){
    isDragging = true;
    e.preventDefault();
});
$(document).mouseup(function(){
    isDragging = false;
}).mousemove(function(e){
    if(isDragging){
        l.css('width', e.pageX);
        r.css('width', w - e.pageX);
    }
});