SplitterJS: Simple Layout Demo

HTML

<script src="http://requirejs.org/docs/release/2.1.10/minified/require.js"></script>
<script src="https://dl.dropboxusercontent.com/u/28584686/splitterjs/Splitter.js"></script>
<div id=viewport class=unselectable>
    <div id=editor class=unselectable></div>
    <div id=leftsplitter class=verticalSplitter></div>
    <div id=content>
        <div id=map class=unselectable></div>
        <div id=topsplitter class=horizontalSplitter></div>
        <div id=timeline class=unselectable></div>
    </div>
</div>

CSS

html, body {
    margin: 0;
    height: 100%;
    padding: 0;
    background-color: gray;
    bottom: 0;
}
#map {
    top: 0;
    left: 0;
    right: 0;
    bottom: 250px;
    background-color: coral;
    position: absolute;
}
#editor {
    right: 80%;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: lightblue;
    position: absolute;
}
#timeline {
    left: 0;
    right: 0;
    top: calc(100% - 250px);
    bottom: 0;
    background-color: wheat;
    position: absolute;
}
#content {
    left: 20%;
    right: 0;
    bottom: 0;
    top: 0;
    position: absolute;
    background-color: lightseagreen;
}
#viewport {
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    position: fixed;
}
.unselectable {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.verticalSplitter {
    width: 6px;
    background: linear-gradient(to right, #21374c 0%, #004966 30%, #21374c 100%);
}
.horizontalSplitter {
    height: 6px;
    background: linear-gradient(to right, #21374c 0%, #004966 30%, #21374c 100%);
}

JavaScript

require(['Splitter'], function (Splitter) {
	    var left = new Splitter({
	        elementOne: editor, // Div to the left of the splitter
	        elementTwo: content, // Div to the right of the splitter
	        splitter: leftsplitter, // Splitter div
	        orientation: 'vertical', // Orientation [vertical | horizontal]
	        collapse: 'left', // Collapse Direction [left | right | top | bottom]
	        placeholderSplitter: false // Use a placeholder splitter
	    }).Render();

	    var top = new Splitter({
	        elementOne: map, // Div to the left of the splitter
	        elementTwo: timeline, // Div to the right of the splitter
	        splitter: topsplitter, // Splitter div
	        orientation: 'horizontal', // Orientation [vertical | horizontal]
	        collapse: 'bottom', // Collapse Direction [left | right | top | bottom]
	        placeholderSplitter: false // Use a placeholder splitter
	    }).Render();

	});