title: CSS issue, table not filling up screen
body: <p>I've been having an issue with a table that I want to fill the browser window. It's 3 columns wide, and 5 rows high. My desired outcome is that each cell is 33% of the width of the screen, and each cell is 20% of the height of the screen. There are no fixed values, instead I want to do everything with percentages, so that it resizes/stretches to always fill the browser.</p>
  
  <p>The problem is that as I resize the browser although the width works perfectly, the height doesn't work in the same way. Even though I've specified each TR row as 20% high, it's not working in that way. What happens is that the bottom half of the screen remains empty, and the 5 rows aren't following the 20% height that I specified. In one bizarre instance (whilst trying things), the first row was 50% of the height, and the other 50% was the bottom 4 rows. Currently (as it is below), these 5 rows take up about 60% of the screen height, with the remaining 40% unused. Did I mention I hate CSS?</p>
  
  <p>Here's the table:</p>
  
  <pre><code>&lt;div id="portrait" style="width:100%;height:100%;"&gt;
      &lt;table cellpadding=0 cellspacing=0 border=1 style="width:100%;height:100%;"&gt;
          &lt;tr style="width:100%;height:20%;"&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr style="width:100%;height:20%;"&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr style="width:100%;height:20%;"&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr style="width:100%;height:20%;"&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr style="width:100%;height:20%;"&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
              &lt;td style="width:33%;height:100%;"&gt;&lt;img style="width:100%;height:100%;" src="x.jpg"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In each level, I'm defining the width and height, and then inside I'm defining a relative percentage bearing in mind the parent container. At the inner most level, where the image tag is, it's set to 100%x100% so that it fills it's container (width as 33% defined in the TD and height 20% defined in the TR).</p>
  
  <p>Here's how I read the html above as far as the first image. The div is set to use 100% of the width of the browser, and 100% of the height. It contains only one item, a table. The table is defined to 100%x100%, but that's of course limited by it's parent container - the div, but as that is 100%x100% also, the table should be full browser size (IMHO). The TR defines width 100%, so it fills the width of the browser. It's set to 20% height, so I believe that means it should be fixed at 20% of the height of the table, which is 20% of 100% of the screen. The TD is defined as 33% width (3 columns of 33% to fill the browser), and height 100% (this column will fill 100% of it's parent TR, which is set to 20% of the browser height). Finally, the image is set to fill it's TR/TD and is therefore set to 100%x100%.</p>