title: Vertical align complex multiple div site layout
body: <p>OK.  Here's the deal.  I've read quite a few articles on this site and others about vertical centering but they all seem to refer to centering a single div and I haven't been able to apply it correctly to a more complex layout.  I'm working on a site which has a header, navigation bar, content area, sidebar, and footer. A mockup of the design can be seen here: <a href="http://i55.tinypic.com/e9xnkp.jpg" rel="nofollow">mockup</a></p>
  
  <p>I've got all the divs fitting together nicely thanks to the use of the 0px text trick in the container div and the content &amp; sidebar sit next to each other using display:inline-block. the header, navbar, and footer are horizontally centered using margin-left:auto &amp; margin-right:auto.  together this nicely renders the whole site horizontally centered but I can't figure out how to apply vertical centering to the whole site without breaking the design. This is not a fluid layout, all divs have fixed pixel sizes that the content fits into very nicely.  It seems that there should be some way to use absolute or relative positioning and percentages to center everything vertically but I can't figure out how to do it.  The code for the mockup is attached.  Thanks!</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  &lt;!--
  DIV.container {
      position:relative;
      height:100%;
      width:100%;
      display:table;
      text-align:center;
      font-size:0px;
      overflow:hidden;
  }
  #header {
      width:650px;
      height:87px;
      z-index:1;
      background-color:#C90;
      vertical-align:middle;
      margin-left:auto;
      margin-right:auto;
      font-size:12px;
  }
  #navbar {
      width:650px;
      height:32px;
      z-index:2;
      background-color:#0FF;
      vertical-align:middle;
      font-size:12px;
      margin-left:auto;
      margin-right:auto;
  }
  #content {
      width:500px;
      height:265px;
      z-index:3;
      background-color:#33F;
      display:inline-block;
      vertical-align:middle;
      font-size:12px;
  }
  #sidebar {
      width:150px;
      height:265px;
      z-index:4;
      background-color:#999;
      display:inline-block;
      vertical-align:middle;
      font-size:12px;
  }
  #footer {
      width:650px;
      height:58px;
      z-index:5;
      background-color:#F69;
      vertical-align:middle;
      font-size:12px;
      margin-left:auto;
      margin-right:auto;
  }
  --&gt;
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;div id="header"&gt;Header&lt;/div&gt;
  &lt;div id="navbar"&gt;Navbar&lt;/div&gt;
  &lt;div id="content"&gt;Content&lt;/div&gt;
  &lt;div id="sidebar"&gt;Sidebar&lt;/div&gt;
  &lt;div id="footer"&gt;Footer&lt;/div&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>