title: Vertical align table header
body: <p>I currently have a table that is horizontally and vertically centered. I want to add a header to the table (900px max) (85%) wide and keep the table centered. How can I do this? I am thinking of using a row? Here is the fiddle <a href="http://jsfiddle.net/jfarr07/ajQaL/" rel="nofollow">http://jsfiddle.net/jfarr07/ajQaL/</a></p>
  
  <p>HTML<br>
      
      
      
        </p>
  
  <pre><code>  &lt;div class="containcell"&gt;&lt;div class="columnsleft"&gt;&lt;/div&gt;&lt;/div&gt;
  
    &lt;div class="containcell"&gt;&lt;div class="columnsright"&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.containcell {
  display:table-cell;
  vertical-align: middle;
  width:24%;
  }
  .tablecontain {
  margin:0 auto;
  max-width:1000px;
  height:100%;
  min-height:100%;
  }
  .columncontainer {
  width:85%;
  max-width:900px;
  margin:0 auto;
  height:100%;
  min-height:100%;
  display:table;     
  }
  .blurredwedding {
  background-image:url(../img/oakglen.png);
  background-attachment:fixed;
  background-repeat:none;
  background-size:cover;
  height:100%;
  width:100%;
  min-height:100%;
  margin-top:100px;
  position:relative;
  display:table;
  }
  .columnsleft {
  width:90%;
  height:400px;
  text-align:center;
  position:relative;
  -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.5);
  -moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.5);
  box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.5);
  
  }
  .columnsright {
   width:90%;
   height:400px;
   text-align:center;
   position:relative;
   -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.5);
   -moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.5);
   box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.5);
  
  } 
  </code></pre>