title: Centering a div in Google Chrome
body: <p>I have the following CSS:</p>
  
  <pre><code>html, body {
          background-color:black;
          font-family:"arial bold";
          overflow:auto;
          text-align: center; 
      }
  div#content {
          width:792px;
          height:100%;
          padding:0px;
      }
  
  div#header  {
          height:216px;
          width:100%;
      }
  </code></pre>
  
  <p>The HTML code I have is:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;
              Think in a NEW BOX.
          &lt;/title&gt;
  
          &lt;link rel="stylesheet" type="text/css" href="styles/default.css" /&gt;
      &lt;/head&gt;
      &lt;body onload=""&gt;
          &lt;div id="content"&gt;
              &lt;div id="header"&gt;
                  &lt;img src="images/title-1.png" /&gt;&lt;img src="images/title-2a.png" /&gt;&lt;img src="images/title-3.png" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now, this works great in IE.  The div centers perfectly (header).  In Google Chrome, however, the div is left aligned.  Am I missing something?</p>