title: How do I make a div fill an entire table cell?
body: <p>I'm trying to fill the center cell of a table with a div element.  For the purposes of illustrating the problem, the div is styled with a red background.  It seems to work in Chrome, but not IE.  In the fiddle below, IE is setting the height of the div to the minimum height necessary to contain its content.  In tinkering around with this problem with different CSS settings, I managed to get IE to interpret "height: 100%"; as "the height of the browser window".  However, as the question states, I want IE to interpret it as the height of the td cell.  Any ideas?</p>
  
  <p><a href="http://jsfiddle.net/UBk79/">http://jsfiddle.net/UBk79/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>*{
      padding: 0px;
      margin: 0px;
  }
  html, body{
      height: 100%;
  }
  #container{
      height:100%;
      width: 100%;
      border-collapse:collapse;
  }
  #centerCell{
      border: 1px solid black;
  }
  #main{
      height: 100%;
      background-color: red;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table id="container"&gt;
    &lt;tr id="topRow" height="1px"&gt;
      &lt;td id="headerCell" colspan="3"&gt;
        TOP
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr id="middleRow"&gt;
      &lt;td id="leftCell" width="1px"&gt;
        LEFT
      &lt;/td&gt;
      &lt;td id="centerCell"&gt;
        &lt;div id="main"&gt;CENTER&lt;/div&gt;
      &lt;/td&gt;
      &lt;td id="rightCell" width="1px"&gt;
        RIGHT
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr id="bottomRow" height="1px"&gt;
      &lt;td id="footerCell" colspan="3"&gt;
        BOTTOM
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>