title: html css mondrian positioning
body: <p>QWERTY. Hey guys, learning HTML, trying to create a mondrian style image, I only get six boxes and the rest do not show up (boxes 7, 8 and 9). Here is the code. What am I doing wrong? I am a beginner. Have I run out of pixels on the page? It's a mac with 2560x1600 iris display.
  Edit: I tried changing the positioning attribute for the last three boxes to absolute, static, fixed and the rest but the boxes just don't show up. Tried debugging in various ways but could not find the mistake am making.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  div.box1 {
      float: left;
      background-color: white;
      width: 150px;
      height: 5px;
      padding: 30px;
      border-style: solid;
      border-width: 0px 15px 15px 0px;
      /* Border widths: Top.px Right.px Bottom.px Left.px */
  }
  div.box2 {
      float: left;
      background-color: white;
      width: 300px;
      height: 5px;
      padding: 30px;
      border-style: solid;
      border-width: 0px 15px 15px 0px;
  }
  div.box3 {
      float: left;
      background-color: yellow;
      width: 200px;
      height: 5px;
      padding: 30px;
      border-style: solid;
      border-width: 0px 15px 15px 0px;
  }
  div.box4 {
      position: relative;
      left: 0px;
      top: 80px;
      background-color: white;
      width: 30px;
      height: 100px;
      padding: 30px;
      border-style: solid;
      border-width: 0px 15px 15px 0px;}
  div.box5 {
      position: relative;
      left: 80px;
      bottom: 95px;
      background-color: red;
      width: 270px;
      height: 150px;
      padding: 110px;
      border-style: solid;
      border-width: 0px 15px 15px 15px;}
  div.box6 {
      position: relative;
      left: 585px;
      bottom: 494px;
      background-color: yellow;
      width: 160px;
      height: 60px;
      padding: 50px;
      border-style: solid;
      border-width: 15px 15px 15px 15px;}
  }
  div.box7 {
      position: relative;
      right: 50;
      bottom: 50px;
      background-color: yellow;
      width: 50px;
      height: 60px;
      padding: 50px;
      border-style: solid;
      border-width: 15px 15px 15px 15px;}
  }
  div.box8 {
      position: relative;
      right: 50;
      bottom: 50px;
      background-color: yellow;
      width: 50px;
      height: 60px;
      padding: 50px;
      border-style: solid;
      border-width: 15px 15px 15px 15px;}
  }
  div.box9 {
      position: relative;
      right: 50;
      bottom: 50px;
      background-color: yellow;
      width: 50px;
      height: 60px;
      padding: 50px;
      border-style: solid;
      border-width: 15px 15px 15px 15px;}
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="box1"&gt;1&lt;/div&gt;
  &lt;div class="box2"&gt;2&lt;/div&gt;
  &lt;div class="box3"&gt;3&lt;/div&gt;
  &lt;div class="box4"&gt;4&lt;/div&gt;
  &lt;div class="box5"&gt;5&lt;/div&gt;
  &lt;div class="box6"&gt;6&lt;/div&gt;
  &lt;div class="box7"&gt;7&lt;/div&gt;
  &lt;div class="box8"&gt;8&lt;/div&gt;
  &lt;div class="box9"&gt;9&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you.</p>