title: Simple HTML should show div in centre of page
body: <p>Why doesn't this EXTREMELY simple webpage show the div with the id "mainContent" in the centre of the page.</p>
  
  <p>Right now the div is on the left. But I would like the div to be centred in the webpage(body element).</p>
  
  <p>Whats going wrong?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt; &lt;/title&gt;
  
      &lt;style type="text/css"&gt;
      &lt;!--
          body {
              text-align: center;
              background-color: red;
          }
  
          #mainContent {
              width: 800px;
              background-color: blue;
          }
  
          #content {
              width: 600px;
              float: left;
              background-color: green;
  
              overflow: hidden;
          }
  
          #sidebar {
              width: 200px;
              float: left;
              background-color: yellow;
  
              overflow: hidden;
          }
      --&gt;
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="mainContent"&gt;
          &lt;!-- Left Column/Bar --&gt;
          &lt;div id="content"&gt;
              &lt;p&gt;content&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;!-- Right Column/Bar --&gt;
          &lt;div id="sidebar"&gt;
              &lt;p&gt;sidebar&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>