Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#canvas{
  width: 300px;
  height: 300px;
  background-color: ivory;
  margin: 0 auto;
  box-shadow: 15px 15px 15px gray;
}
#first-row{
  height: 75%;
  width: 100%;

}
#big-rectangle{
  width: 75%;
 height: 100%;
}
#first-divider{
  width: 3%;
  height: 100%;
}
#first-column{
  height: 100%;
  width: 22%;
}
#second-divider{
  height: 6%;
  width: 100%;
}
#first-medium-rectangle {
  height: 45%;
  width: 100%;
}
#second-medium-rectangle {
  height: 49%;
  width: 100%;
}
#second-row {
  height: 3%;
  width: 100%;
}
#third-row {
  height: 22%;
  width: 100%;
}
#second-column{
  height: 100%;
  width: 7%;
}
#first-small-recktangle{
  height: 42.5%;
  width: 100;
}
#short-divider {
  height: 15%;
  width: 100%;
}
#second-small-recktangle{
  height: 42.5%;
  width: 100;
  background-color: yellow;
}
#first-vertical-devider{
  height: 100%;
  width: 3%;
}
#second-vertical-devider{
  height: 100%;
  width: 3%;
}
#thrid-medium-rectangle{
  height: 100%;
  width: 65%;
}
#blue-square{
  height: 100%;
  width: 22%;
  background-color:blue;
}
.red{
  background-color: red;
}
.right{
  float: right;
}
.black{
  background-color: black;
}
</style>
</head>
<body>
  <div id="canvas">
    <div id="first-row">
      <div id="big-rectangle" class="red right"></div>
      <div id="first-divider" class="black right"></div>
      <div id="first-column" class="right ">
        <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="second-column" class="right">
        <div id="first-small-recktangle"></div>
        <div id="short-divider" class="black"></div>
        <div id="second-small-recktangle"></div>
      </div>
      <div id="first-vertical-devider" class="black right">      </div>
      <div id="thrid-medium-rectangle" class="right"></div>
      <div id="second-vertical-devider" class="black right">      </div>
      <div id="blue-square" class="right"></div>
    </div>
    </div>


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

}
#big-rectangle{
  width: 75%;
 height: 100%;
}
#first-divider{
  width: 3%;
  height: 100%;
}
#first-column{
  height: 100%;
  width: 22%;
}
#second-divider{
  height: 6%;
  width: 100%;
}
#first-medium-rectangle {
  height: 45%;
  width: 100%;
}
#second-medium-rectangle {
  height: 49%;
  width: 100%;
}
#second-row {
  height: 3%;
  width: 100%;
}
#third-row {
  height: 22%;
  width: 100%;
}
#second-column{
  height: 100%;
  width: 7%;
}
#first-small-recktangle{
  height: 42.5%;
  width: 100;
}
#short-divider {
  height: 15%;
  width: 100%;
}
#second-small-recktangle{
  height: 42.5%;
  width: 100;
  background-color: yellow;
}
#first-vertical-devider{
  height: 100%;
  width: 3%;
}
#second-vertical-devider{
  height: 100%;
  width: 3%;
}
#thrid-medium-rectangle{
  height: 100%;
  width: 65%;
}
#blue-square{
  height: 100%;
  width: 22%;
  background-color:blue;
}
.red{
  background-color: red;
}
.right{
  float: right;
}
.black{
  background-color: black;
}</script>
</body>
</html>