title: CSS Table Styles - Get table row to fill entire content area
body: <p>I'm trying to use the CSS table display to layout my page and I'm having trouble getting my main content area to take up the entire area (vertically) between the header and the footer. The main div contains some floated elements that don't necessarily extend the length of the screen. Basically, no matter what I do, the area of my main content is decided by the vertical height of these elements. Is there anything I can do about this? Thanks!</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div id="all-container"&gt;
      &lt;div id="header"&gt;
    ...
      &lt;/div&gt;
      &lt;div id="table-container"&gt;
          &lt;div id="content"&gt;
              &lt;div id="side-bar"&gt;
                 ...      
              &lt;/div&gt;
              &lt;div id="main"&gt;
                 ... some content that's floated ...
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#all-container {
      margin:0px;
      position:relative;
      min-height:100%;
      background-color:#E6DCD8;
  }
  
  #header {
      height:60px;
      padding-left:20px;
      padding-right:20px;
      background-color:#685642;
  }
  
  #table-container {
      display:table;
      height:100%;
  }
  
  #content {
      display:table-row;
      height:100%;
  }
  
  #side-bar {
      display:table-cell;
      vertical-align:top;
      padding-right:100px;
      height:100%;
      padding-bottom:60px;
  }
  
  #main {
      display:table-cell;
      vertical-align:top;
      border-left-style:solid;
      border-left-width:normal;
      border-left-color:#685642;
      padding-bottom:60px;
      height:100%;
  }
  
  #footer {
      position:absolute;
      width:100%;
      height:50px;
      bottom:0px;
      background-color:#685642;
  }
  </code></pre>