Untitled

<!DOCTYPE html>
<html>
 <head>
  <title>JS Bin</title>
 <style id="jsbin-css">
#canvas {width: 400px;
         height: 400px;
         background-color: ivory;
         margin: 0 auto;
         box-shadow: 15px 15px 10px gray;
                        }
#first-row {width: 100%;
            height: 75%;
           background-color: ivory;}

#big-rectangle {width: 75%;
                height: 100%;
                }
.red {background-color: red;}
.right {float: right;}
.black {background-color: black;}
#first-divider{height: 100%;
               width: 3%;
               }
#first-column {height: 100%;
               width: 25%;
               }
#second-divider {height: 3%;
                width: 100%;
                background-color: black;}
#first-medium-rectangle {height: 48.5%;
                         width: 100%;
                         }
#second-medium-rectangle {height: 24%;
                          width: 100%;
                          }
#second-row {height: 3%;
             width: 100%;
}
#third-row {height: 22%;
    width: 100%;
    background-color: blue;}

#rectangle {height: 100%;
            width: 64%;
            background-color: ivory}
#third-divider {height: 100%;
                width: 3%;}
#fourth-divider {height: 100%;
                width: 3%;}
#rectangle2 {height: 100%;
             width: 8%;
             background-color: yellow}
#rectangle3 {height: 18%;
             width: 100%;}
#rectangle4 {height: 43%;
             width: 100%;
             background: ivory;}
</style>
</head>
 <body>
   <div id="canvas">

      <div id="first-row" class="righ">
        <div id="big-rectangle" class="red right"></div>
        <div id="first-divider" class="black right"></div>

        <div id="first-column" class="righ">
           <div id="first-medium-rectangle"></div>
           <div id="second-divider" class="black"></div>
           <div id="second-medium-rectangle"></div>
        </div>
      </div>

   <div id="second-row" class="black"></div>

     <div id="third-row">
         <div id="rectangle2" class="right">
           <div id="rectangle4"></div>
           <div id="rectangle3" class="black"></div>
         </div>

         <div id="fourth-divider" class="black right"></div>
         <div id="rectangle" class="right"></div>
         <div id="third-divider" class="black right"></div>

     </div>

 canvas
   </div>


<script id="jsbin-source-css" type="text/css">#canvas {width: 400px;
         height: 400px;
         background-color: ivory;
         margin: 0 auto;
         box-shadow: 15px 15px 10px gray;
                        }
#first-row {width: 100%;
            height: 75%;
           background-color: ivory;}

#big-rectangle {width: 75%;
                height: 100%;
                }
.red {background-color: red;}
.right {float: right;}
.black {background-color: black;}
#first-divider{height: 100%;
               width: 3%;
               }
#first-column {height: 100%;
               width: 25%;
               }
#second-divider {height: 3%;
                width: 100%;
                background-color: black;}
#first-medium-rectangle {height: 48.5%;
                         width: 100%;
                         }
#second-medium-rectangle {height: 24%;
                          width: 100%;
                          }
#second-row {height: 3%;
             width: 100%;
}
#third-row {height: 22%;
    width: 100%;
    background-color: blue;}

#rectangle {height: 100%;
            width: 64%;
            background-color: ivory}
#third-divider {height: 100%;
                width: 3%;}
#fourth-divider {height: 100%;
                width: 3%;}
#rectangle2 {height: 100%;
             width: 8%;
             background-color: yellow}
#rectangle3 {height: 18%;
             width: 100%;}
#rectangle4 {height: 43%;
             width: 100%;
             background: ivory;}


</script>
</body>

</html>