Untitled

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <title>ABCDE</title>
<style>
html, body {
  margin: 0;
}
#grid {
        height : 400px;
        width  : 400px;
}
#grid div {
        color      : white;
        float      : left;
        font       : bold 20px sans-serif;
        text-align : center;
        position: fixed;
}
#A {
        background : #5080bb;
        width: 100%;
        height: 30%;
        bottom: 0;
        z-index: 1;
}
#B {
        background : #7e64a0;
        width: 40%;
        height: 40%;
        top: 0;
        left: 0;
        z-index: 5;
}
#C {
        background : #f69447;
        width: 100%;
        height: 30%;
        z-index: 2;
}
#D {
        background : #99b959;
        z-index: 3;
        width: 50%;
        height: 50%;
        top: 50%;
        left: 50%;
        margin: -25% 0 0 -25%;
}
#E {
        background : #be504e;
        z-index: 4;
        width: 30%;
        height: 30%;
        bottom: 10%;
        right: 0;
}
</style>
        </head>
        <body>
                <div id="grid">
                        <div id="A">A</div>
                        <div id="B">B</div>
                        <div id="C">C</div>
                        <div id="D">D</div>
                        <div id="E">E</div>
                </div>
        </body>
</html>