title: How to create a simple head/center/foot layout?
body: <p>What I want to do sounds so extremly easy but I can't get it working for some reason... I want a block element with a specific size which has three child block elements: A header, a center area and a footer. It must have the following characteristics:</p>
  
  <ul>
  <li>The header and footer only takes as much height as needed by the content. This content is dynamic so I can't use fixed sizes here. So let's say the text in the header is localized. It can be a short english text (one line) or a long french text (which wraps into two lines).</li>
  <li>The center area takes all the other space. And with this I mean it REALLY takes all the space and it is not just positioned at the top of the center. So if the center element has a background color, then this color must be visible for the whole space between header and footer. Or if the center element is an image then it must be stretched into the area between header and footer.</li>
  <li>All sizes are unknown at creation time, so using absolute positioning doesn't work. Also using the usual margin trick on the center element doesn't work because the height of the header/footer is unknown because it is dynamic.</li>
  <li>No JavaScript hacks.</li>
  <li>Must work in IE7+, FF3+, Chrome and Safari.</li>
  </ul>
  
  <p>So let's take this example code:</p>
  
  <pre><code>&lt;div style="width: 512px; height: 512px"&gt;
    &lt;div class="head"&gt;This is the header&lt;/div&gt;
    &lt;div class="center"&gt;This is the center area&lt;/div&gt;
    &lt;div class="foot"&gt;This is the footer&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the end it should look like this:</p>
  
  <pre><code>+--------------------------+
  | This is the header       |
  +--------------------------+
  | This is the center area  |
  |                          |
  |                          |
  |                          |
  |                          |
  |                          |
  +--------------------------+
  | This is the footer       |
  +--------------------------+
  </code></pre>
  
  <p>How can I do this? Even with an old-school table and using height="100%" for the center cell I can't get it working because the table is too large then in IE7 (Center area is 512px, so table itself is 512px plus the height of the header and footer cell).</p>
  
  <p>What I'm searching for is some CSS code to make the above HTML code (Or any alternative HTML code, even a real HTML table is allowed) appear as described above and matching all criterias as listed above.</p>