Resizable

by Richard Houltz

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="header">
  Fixed header
</div>
<div class="wrapper">
  <div class="inner-wrapper">
    <div class="left pane">Left</div>
    <div class="center pane">
      <div class="inner">
        <div class="top pane">
          <div class="top-content">Center top</div>
        </div>
        <div class="bottom">
          Center bottom
        </div>
      </div>
    </div>
    <div class="right pane">Right</div>
  </div>
</div>

CSS

html,
body {
  height: 100%;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background-color: moccasin;
}

.wrapper {
  position: absolute;
  top: 21px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: fuchsia;
}

.inner-wrapper,
.center.pane .inner {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.pane {
  display: table-cell;
}

.left.pane {
  background-color: olivedrab;
  width: 25%;
}

.center.pane {
  background-color: lightblue;
}

.center.pane .inner .top,
.center.pane .inner .bottom {
  display: table-row;
}

.center.pane .inner .top {
  background-color: lightcoral;
}

.center.pane .inner .bottom {
  background-color: orange;
  height: 100%;
  width: 100%;
}

.right.pane {
  background-color: #999;
  width: 25%;
}

.top-content {
  width: 100%;
  height: 100%;
}

JavaScript

$(function() {
  $(".left.pane").resizable({
    handles: "e, w",
    stop: function(event, ui) {
      setWidthInPercent(ui.element);
    }
  });
  $(".right.pane").resizable({
    handles: "e, w",
    resize: function(event, ui) {
      ui.position.left = 0;
    },
    stop: function(event, ui) {
      setWidthInPercent(ui.element);
    }
  });
  $(".top-content").resizable({
    handles: "s",
    stop: function(event, ui) {
      ui.element.width("");
    }
  });

  function setWidthInPercent(element) {
    var percentageWidth = (element.width() / element.parent().width()) * 100;
    element.width(percentageWidth + '%');
  }
});