Split screen into 4 section

Splitted Screen into 4 sections with resizeable sections.

HTML

<div id="cont">
        <fieldset id="win_left">
            <div id="w_html">
                <object type="text/html" data="http://validator.w3.org/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
    </object>
            </div>
            <div id="handler_hor_left" class="handler_hor" title='Drag Up-Down'></div>
            <div id="w_js">
<object type="text/html" data="https://www.google.ro/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
    </object>
            </div>
        </fieldset>
        <div id="handler_vertical" title='Drag left-right'></div>
        <fieldset id="win_right">
            <div id="w_css">
<object type="text/html" data="http://validator.w3.org/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
    </object>
            </div>
            <div id="handler_hor_right" class="handler_hor" title='Drag Up-Down'></div>
            <div id="w_result">
                
<object type="text/html" data="http://validator.w3.org/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
    </object>
                
            </div>
        </fieldset>
    </div>

CSS

body {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#win_left {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50%;
  height: 100%;
  background: rgb(128, 128, 128);
  border: none;
  margin: 0px;
  padding: 0px;
}

#win_right {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50%;
  height: 100%;
  background: rgb(83, 83, 83);
  border: none;
  margin: 0px;
  padding: 0px;
}

#w_html {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50%;
  background: #fff;
  overflow: auto;
}

#w_js {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50%;
  background: #fff;
  overflow: auto;
}

#w_css {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 50%;
  background: #fff;
  overflow: auto;
}

#w_result {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 50%;
  background: #fff;
  overflow: auto;
}

#handler_vertical {
  position: absolute;
  top: 0px;
  left: 50%;
  z-index: 10;
  width: 10px;
  height: 100%;
  background: #ccc;
  cursor: col-resize;
}

.handler_hor {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 10px;
  z-index: 10;
  background: #ccc;
  cursor: row-resize;
}

JavaScript

Mouse = {
  x: 0,
  y: 0,
  isdown: []
};

$(window).mousedown(function(e) {
  if ($(e.target).attr('id') == 'handler_vertical') {
    Mouse.isdown['ver'] = true;
  } else if ($(e.target).attr('id') == 'handler_hor_left') {
    Mouse.isdown['hor_L'] = true;
  } else if ($(e.target).attr('id') == 'handler_hor_right') {
    Mouse.isdown['hor_R'] = true;
  }
});

$(window).mouseup(function() {
  Mouse.isdown['ver'] = false;
  Mouse.isdown['hor_L'] = false;
  Mouse.isdown['hor_R'] = false;
});

$(window).mousemove(function(e) {
  Mouse.x = e.pageX;
  Mouse.y = e.pageY;
  if (Mouse.isdown['ver']) {

    Resize();
  } else if (Mouse.isdown['hor_L']) {
    Resize()
  } else if (Mouse.isdown['hor_R']) {
    Resize()
  }

});

function Resize() {
  var handle_ver = $('#handler_vertical');
  var handle_hor_L = $('#handler_hor_left');
  var handle_hor_R = $('#handler_hor_right');

  if (Mouse.isdown['ver'] && handle_ver.position().left >= 20) {

    if (Mouse.x >= 50 && Mouse.x <= $(window).width() - 50) {
      handle_ver.css({
        'left': Mouse.x - 10
      });
    }

    $('#win_right').css({
      'width': $(window).width() - Number(handle_ver.position().left + handle_ver.width())
    });
    $('#win_left').css({
      'width': handle_ver.position().left
    });
  } else if (Mouse.isdown['hor_L'] && handle_hor_L.position().top >= 20) {
    if (Mouse.y >= 50 && Mouse.y <= $(window).height() - 50) {
      handle_hor_L.css({
        'top': Mouse.y - 10
      });
    }
    $('#w_html').css({
      'height': handle_hor_L.position().top
    });
    $('#w_js').css({
      'height': $(window).height() - Number(handle_hor_L.position().top + handle_hor_L.height())
    });
  } else if (Mouse.isdown['hor_R']) {
    if (Mouse.y >= 50 && Mouse.y <= $(window).height() - 50) {
      handle_hor_R.css({
        'top': Mouse.y - 10
      });
    }
    $('#w_css').css({
      'height': handle_hor_R.position().top
    });

    $('#w_result').css({
      'height': $(window).height() -...