layout with bootstrap resizable

index.html

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li role="presentation" id="navMenu" class="active"><a href="#">nav</a></li>
        <li role="presentation" id="formMenu" class="active"><a href="#">form</a></li>
        <li role="presentation" id="mapMenu" class="active"><a href="#">map</a></li>
        <li role="presentation" id="utilsMenu" class="active"><a href="#">utils</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div id="content">
  <div id="nav" class="tab">nav</div>
  <div id="form" class="tab">form</div>
  <div id="map" class="tab">map</div>
  <div id="utils" class="tab">utils</div>
</div>

layout-with-bootstrap-resizable.markdown

layout with bootstrap resizable

A Pen by Alexander Gabriel on CodePen.

License.

script.js

$('#nav').resizable({
  handles: 'e',
  alsoResizeReverse: '#form'
});

$('#form').resizable({
  handles: 'e',
  alsoResizeReverse: '#map'
});

$('#map').resizable({
  handles: 'e',
  alsoResizeReverse: '#utils'
});

var showTab = function(tab) {
    $('.tab').each(function() {
      if ($(this).attr('id') === tab) {
          if ($(this).is(':visible')) {
              // navbar: Menu deaktivieren
              // keine Ahnung, wieso das Bootstrap nicht selber macht
              $('#' + tab + 'Menu').removeClass('active');
              // Seite ausblenden
              $(this).hide();
          } else {
            $('#' + tab + 'Menu').addClass('active');
              // Seite ausblenden
            $(this).show();
          }
      }
    });
};

$('.nav').on('click', 'li', function () {
  var id = $(this).attr('id'),
      tab = id.substring(0, id.length - 4);
  showTab(tab);
});

$.ui.plugin.add("resizable", "alsoResizeReverse", {

        start: function (event, ui) {

            var self = $(this).data("ui-resizable"), o = self.options,

                _store = function (exp) {
                    $(exp).each(function () {
                        $(this).data("ui-resizable-alsoresize-reverse", {
                            width:  parseInt($(this).width(), 10),
                            height: parseInt($(this).height(), 10),
                            left:   parseInt($(this).css('left'), 10),
                            top:    parseInt($(this).css('top'), 10)
                        });
                    });
                };

            if (typeof (o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.parentNode) {
                if (o.alsoResizeReverse.length) {
                    o.alsoResize = o.alsoResizeReverse[0];
                    _store(o.alsoResizeReverse);
                } else {
                    $.each(o.alsoResizeReverse, function (exp, c) {
                        _store(exp);
                    });
                }
            } else {
                _store(o.alsoResizeReverse);
            }
        },

        resize: function (event, ui) {
            var self = $(this).data("ui-resizable"), o = self.options, os = self.originalSize, op = self.originalPosition,
                delta = {
                    height: (self.size.height - os.height) || 0,
                    width:  (self.size.width - os.width)   || 0,
                    top:    (self.position.top - op.top)   || 0,
                    left:   (self.position.left - op.left) || 0
                },

                _alsoResizeReverse = function (exp, c) {
                    $(exp).each(function () {
                        var el    = $(this),
                            start = $(this).data("ui-resizable-alsoresize-reverse"),
                            style = {},
                            css   = c && c.length ? c : ['width', 'height', 'top', 'left'];

                        $.each(css || ['width', 'height', 'top', 'left'], function (i, prop) {
                            var sum = (start[prop] || 0) - (delta[prop] || 0), // subtracting instead of adding
                                corr = 0;

                            if (prop === 'width') {
                                // correct for some divs having broad right border
                                if (self.element.context.id === 'map') {
                                    corr = 5;
                                } else {
                                    corr = 10;
                                }
                            }

                            if (sum && sum >= 0) {
                                style[prop] = sum + corr || null;
                            }
                        });

                        el.css(style);
                    });
                };

            if (typeof (o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.nodeType) {
                $.each(o.alsoResizeReverse, function (exp, c) {
                    _alsoResizeReverse(exp, c);
                });
            } else {
                _alsoResizeReverse(o.alsoResizeReverse);
            }
        },

        stop: function (event, ui) {
            var self = $(this).data("ui-resizable");

            $(this).removeData("ui-resizable-alsoresize-reverse");
        }
    });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

style.css

.navbar-nav>.active>a {
  border: 1px solid #333; 
}

body {
  margin: 0;
  padding-top: 50px;
  background-color: #222;
}

#content {
  height: calc(100vh - 64px);
}

.tab {
  float: left;
  height: 100%;
}

#nav,
#form,
#map {
  border-width: 0 5px 0 0;
  border-style: solid;
  -webkit-border-image: 
    -webkit-gradient(linear, 100% 0, 0 0, from(rgba(0, 0, 0, 1)), to(rgba(84, 84, 84, 0.8))) 1 100%;
  -webkit-border-image: 
    -webkit-linear-gradient(left, rgba(0, 0, 0, 1), rgba(84, 84, 84, 0.8)) 1 100%;
  -moz-border-image:
    -moz-linear-gradient(left, rgba(0, 0, 0, 1), rgba(84, 84, 84, 0.8)) 1 100%;  
  -o-border-image:
    -o-linear-gradient(left, rgba(0, 0, 0, 1), rgba(84, 84, 84, 0.8)) 1 100%;
  border-image:
      linear-gradient(to left, rgba(0, 0, 0, 1), rgba(84, 84, 84, 0.8)) 1 100%;
}

#nav {
  background-color: yellow;
  width: 10%;
}

#form {
  background-color: orange;
  width: 35%;
  overflow-y: auto;
  overflow-x: hidden;
}

#map {
  background-color: green;
  width: 45%;
}

#utils {
  background-color: brown;
  /* wenn nicht -1px */
  /* bricht utils beim Schieben auf die nächste Zeile */
  width: calc(10% - 1px);
}

styles

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />