Untitled

<!DOCTYPE html>
<html>
<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;
}

#first-row {
  height: 75%;
  width: 100%;

}

#big-rectangle {
  height: 100%;
  width: 75%;
}

.red {
  background-color: red;
}

.right {
  float: right;
}

.black {
  background-color: black;
}

#first-divider {
  height: 100%;
  width: 3%;
}

.white {
  background-color: white;
}

#second-divider {
  height: 3%;
  width: 100%;
}

#first-medium-rectangle {
  height: 48.5%;
  width: 100%;
}

#second-medium-rectangle {
  height: 48.5%;
  width: 100%;
}
#first-column {
  height: 100%;
  width: 22%;
}


#second-row {
  height: 3%;
  width: 100%;
}

#third-row {
  height: 22%;
  width: 100%;
}

#last-column {
  height: 100%;
  width: 5%;
}

#first-small-rectangle {
  height: 45%;
  width: 100%;
}

#small-divider {
  height: 10%;
  width: 100%;
}

#second-small-rectangle {
  height: 45%;
  width: 100%;
  background-color: yellow;
}

#twin-divider {
  height: 100%;
  width: 3%;
}

#big-white-rectangle {
  height: 100%;
  width: 67%;
  background-color: white;
}

#blue-rectangle {
  height: 100%;
  width: 22%;
  background-color: blue;
  float: left;
}
</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="white 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="last-column" class="white right">
      <div id="first-small-rectangle"></div>
      <div id="small-divider" class="black"></div>
      <div id="second-small-rectangle"></div>


    </div>
    <div id="twin-divider" class="black right"></div>
    <div id="big-white-rectangle" class="red right"></div>
    <div id="blue-rectangle" class="red right"></div>
    <div id="twin-divider" class="black right"></div>
  </div>


</div>


<script id="jsbin-source-css" type="text/css">#canvas {
  width: 300px;
  height: 300px;
  background-color: ivory;
}

#first-row {
  height: 75%;
  width: 100%;

}

#big-rectangle {
  height: 100%;
  width: 75%;
}

.red {
  background-color: red;
}

.right {
  float: right;
}

.black {
  background-color: black;
}

#first-divider {
  height: 100%;
  width: 3%;
}

.white {
  background-color: white;
}

#second-divider {
  height: 3%;
  width: 100%;
}

#first-medium-rectangle {
  height: 48.5%;
  width: 100%;
}

#second-medium-rectangle {
  height: 48.5%;
  width: 100%;
}
#first-column {
  height: 100%;
  width: 22%;
}


#second-row {
  height: 3%;
  width: 100%;
}

#third-row {
  height: 22%;
  width: 100%;
}

#last-column {
  height: 100%;
  width: 5%;
}

#first-small-rectangle {
  height: 45%;
  width: 100%;
}

#small-divider {
  height: 10%;
  width: 100%;
}

#second-small-rectangle {
  height: 45%;
  width: 100%;
  background-color: yellow;
}

#twin-divider {
  height: 100%;
  width: 3%;
}

#big-white-rectangle {
  height: 100%;
  width: 67%;
  background-color: white;
}

#blue-rectangle {
  height: 100%;
  width: 22%;
  background-color: blue;
  float: left;
}


</script>
</body>
</html>