Untitled

<!DOCTYPE html>
<html>
<head>
<meta >
  <title>Obraz</title>
<style id="jsbin-css">
#vaszon {
  width: 300px;
  height: 300px;
  background-color: ivory;
  margin: 0 auto;
  box-shadow: 15px 15px 10px gray;
}

#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%;
}

#first-column {
  height: 100%;
  width: 22%;
}

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

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

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

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

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

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

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

#second-tiny-rectangle {
  height: 45%;
  width: 100%;
}

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

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

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

#wide-rectangle {
  height: 100%;
  width: 67%;
}

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

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}
</style>
</head>
<body>
  <div id="vaszon">
    <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="last-column" class="right">
        <div id="first-tiny-rectangle"></div>
        <div id="third-divider" class="black"></div>
        <div id="second-tiny-rectangle" class="yellow"></div>
      </div>
      <div id="fourth-divider" class="black right"></div>
      <div id="wide-rectangle" class="right"></div>
      <div id="fifth-divider" class="black right"></div>
      <div id="small-rectangle" class="blue right"></div>
    </div>
  </div>


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

#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%;
}

#first-column {
  height: 100%;
  width: 22%;
}

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

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

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

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

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

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

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

#second-tiny-rectangle {
  height: 45%;
  width: 100%;
}

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

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

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

#wide-rectangle {
  height: 100%;
  width: 67%;
}

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

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}</script>
</body>
</html>