title: How would I convert this table layout to divs/css?
body: <p>I'm really trying to work with div's and I can't seem to get the equivalent to the following simple table layout:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;Table example&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;style type="text/css"&gt;
        html, body {height: 100%}
        .content {width: 750px; vertical-align: top}
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body style="margin: 0; padding: 0"&gt;
      &lt;table style="height: 100%; width: 100%; border-collapse: collapse"&gt;
        &lt;tr style="background-color: #666666"&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td class="content" style="height: 100px"&gt;&lt;h1&gt;Header Content&lt;/h1&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr style="background-color: #BBBBBB"&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td class="content" style="background-color: #FFFFFF"&gt;&lt;h1&gt;Main Content&lt;/h1&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr style="background-color: #666666"&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td class="content" style="height: 100px"&gt;&lt;h1&gt;Footer Content&lt;/h1&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The important elements that I want to preserve:</p>
  
  <ol>
  <li><p>Any real content is fixed width. (in this case, 750px)</p></li>
  <li><p>The header and footer backgrounds expand to 100% of the page width.</p></li>
  <li><p>The main content background does not expand horizontally, but does expand vertically to fill the area between header and footer.</p></li>
  <li><p>The footer is always at the bottom of the page even when the main content is not very tall.</p></li>
  </ol>
  
  <p>I've tried a number of strategies and found at least 2 different ways to keep the footer at the bottom of the page using divs. Unfortunately, if the main content is in a div, there's doesn't seem to be any way to make it expand vertically to fill the space between the header and footer on short pages.</p>
  
  <p>Edit: Changed the example to show that it works even when not in quirks mode. The above validates.</p>
  
  <p>Edit 2:</p>
  
  <p>I've found a way to do this for the most part with javascript. So, I guess my question is: how do I do this without javascript. Here's what I'm using (which I'm sure only works in firefox, but I could fix that up):</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function changeDiv() {
      document.getElementById("content").style.minHeight = document.body.clientHeight - 200 + "px";
  }
  changeDiv();
  window.onresize = changeDiv;
  &lt;/script&gt;
  </code></pre>
  
  <p>"content" would specify the main content div I want to expand.</p>