Edit in JSFiddle

<d-linear-layout class="width100 height100">
    <div class="red">A</div>
    <d-linear-layout vertical="false" class="fill">
        <d-linear-layout class="width20">
            <div class="fill green">B</div>
            <div class="fill blue">C</div>
        </d-linear-layout>
        <div class="fill orange">D</div>
        <div class="fill green">E</div>
    </d-linear-layout>
    <div class="red">F</div>
</d-linear-layout>

html, body {
    height: 100%;
    margin: 0;
    font-weight: bold;
}

.width20 { width: 20%; }
.width100 { width: 100%; }
.height100 { height: 100%; }
/* width100 and height100 classes are also available in delite/themes/defaultapp.css */

.red { background-color: #D9534F; }
.blue { background-color: #5BC0DE; }
.green { background-color: #5CB85C;}
.orange { background-color: #F0AD4E}

require.config({
    baseUrl: "http://ibm-js.github.io/libraries/master"
});
require(["deliteful-build/layer"], function () {
    require([
        "deliteful/LinearLayout"
    ], function (){
        document.body.style.display = "";
    });
});