side-by-side-resizable-divs

Left div is resizable. Right takes up remaining space without additional javascript

by kmbro

HTML

<div id="container">
  <div id="left" class="pane">
    floats to left of container
  </div>
  <div id="right" class="pane">
    takes up remaining space on right
  </div>
</div>

CSS

div {
  box-sizing: border-box; /* include padding+borders in size */
  border: solid 5px;
}

#container {
  height: 100px;
  border-color: black;
  overflow: hidden;
}

.pane {
  height: 100%;
  overflow: scroll; /* works with hidden too */
}

#left {
  float: left;
  width: 180px;
  margin-right: 5px;
  border-color: yellow;
}

#right {
  border-color: red;
}

JavaScript

$(document).ready(function() {
  $("#left").resizable({
    handles: 'e'});
});