Nested Squares

Just some nested squares

by phoexer

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <title>Nested Boxes</title>
    <script type="text/javascript" src="http://livejs.com/live.js"></script>
  </head>

  <body>
    <div id="first" class="wrapper">
      <div id="second">
        <div id="third" />
      </div>
    </div>
  </body>

</html>

CSS

body {
  background: lightgray;
}

div {
  height: 60%;
  width: 60%;
  margin: 20% auto auto 20%;
  position: absolute;
  border-style: solid;
}

.wrapper {
  height: 500px;
  width: 500px;
  position: relative;
  margin: 50px auto;
}

#first {
  background-color: darkred;
}

#second {
  background-color: white
}

#third {
  background-color: darkblue;
}