Untitled

<html>
    <head>
        <title>Morning</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            #grid {
                width: 100%;
                height: 100%;
                border: dashed 1px #000;
                position: relative;
            }

            #a, #b, #c, #d, #e {
                position: relative;

                color: #fff;
                text-align: center;
                font-family: Arial;
                font-size: 200%;
                font-weight: bold;
            }

            #a {
                height: 40%;
                top: 60%;
                width: 100%;
                background-color: #4F81BD;
            }

            #b {
                margin-right: 60%;
                top: -40%;
                height: 40%;
                background-color: #8064A2;
                z-index: 3;
            }

            #c {
                top: -80%;
                height: 30%;
                margin-left: 30%;
                background-color: #F79646;
            }

            #d {
                height: 30%;
                margin-left: 60%;
                top: -60%;
                background-color: #9BBB59;
                z-index: 1;
            }

            #e {
                width: 50%;
                height: 50%;
                margin-left: 25%;
                top: -120%;
                background-color: #C0504D;
                z-index: 2;
            }
        </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>