After using jQuery Splitter, everything was working as according to my requirement.

But as you never get your destination smoothly I also got stuck by one issue.

The issue was when I minimize the screen the three vertical panes doesn’t resize as proportion to their width ratio as shown below:

Right Pane shrinked

It looks like limitation of the jQuery Splitter plugin. Same issue found in plugin demo url.

To solve this issue, I need to do following workaround.

I had to handled window resize event, calculate and apply each div’s width and slider left attribute.

This really helped me to meet my requirement properly.

  function resizeClassView() {
    var main_div_width, left_pane_width, right_pane_width,
        first_left_pane_width, second_left_pane_width, left_splitter, right_splitter;

    main_div_width = $(window).width() - 72;
    left_pane_width = (0.67 * main_div_width);
    right_pane_width = main_div_width - left_pane_width;
    first_left_pane_width = (0.5 * left_pane_width);
    second_left_pane_width = (left_pane_width - first_left_pane_width);
    left_splitter = $($('.vsplitter')[0]);
    right_splitter = $($('.vsplitter')[1]);

    $('#main_div').width(main_div_width + 'px');
    $('#left_pane').width(left_pane_width - 2 + 'px');
    $('#first_left_pane').width(first_left_pane_width - 5 + 'px');
    $('#second_left_pane').width(second_left_pane_width + 'px');
    $('#right_pane').width(right_pane_width + 'px');

    left_splitter.css('left', first_left_pane_width - 7 + 'px');
    right_splitter.css('left', left_pane_width - 5 + 'px');
  }

  $(document).ready(function() {
    var main_div_width = '100%';
    $('#main_div').width(main_div_width).height(500).split({
      orientation: 'vertical',
      limit: 3,
      position: '67%'
    });
    $('#left_pane').width($('#left_pane').width()).height(500).split({
      orientation: 'vertical',
      limit: 3,
      position: '50%'
    });
    // handling widow resize event
    $(window).resize(function() {
      resizeClassView();
    });
  });