title: Div table-cell vertical align not working
body: <p>I am trying to simply center text horizontally and vertically using DIV and display type as table-cell but it is not working in either IE8 or Firefox.</p>
  
  <p>Below is the CSS that I am using and that is all that is in the html page.</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  html, body
  {
      background-color:#FFFFFF;
      font-family:Arial, Helvetica, sans-serif;
      margin: 0;
      padding: 0;
      padding-top: 5px;
  }
  div.Main
  {
      background-color:#FFFFFF;
      border-collapse:collapse;
      width:800px;
      margin-left:auto;
      margin-right:auto;
  }
  div.MainHeader
  {
      color:#C00000;
      font-size:18pt;
      font-weight:bold;
      text-align:center;
      width:800px;
  }
  div.BlackBox
  {
      background-color:#000000;
      color:#FFFF00;
      display:table-cell;
      float:left;
      font-size:18pt;
      font-weight:bold;
      height:191px;
      text-align:center;
      vertical-align:middle;
      width:630px;
  }
  div.BlackBoxPicture
  {
      background-color:#000000;
      float:right;
      height:191px;
      margin-top:auto;
      margin-bottom:auto;
      text-align:right;
      vertical-align:bottom;
      width:170px;
  }
  </code></pre>
  
  <p>What am I doing wrong?</p>