title: How to emulate window title bar in CSS/HTML
body: <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  
  &lt;html&gt;
      &lt;head&gt;
      &lt;style&gt;
          table {border: 1px solid black; width: 500px}
          .title {height: 40px}
          .close {float: right}
          td {text-align: center; border: 1px solid black} 
      &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
       &lt;table&gt;
          &lt;tr&gt;
              &lt;td class="title"&gt;  Centered  &lt;span class="close"&gt;XXXXX&lt;/span&gt;  &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;content&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;content&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;content&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In this example, the "XXXX" is indeed placed to the right, but this causes the "Centered" text to be offset slightly to the left. This is because the "XXXX" is still taking up space in the document flow next to the text "Centered". How can I have it so "Centered" is centered exactly like the rest of the table?</p>
  
  <p>heres and example rendering:</p>
  
  <p><a href="http://img43.imageshack.us/img43/9659/screenshoteoo.png" rel="nofollow noreferrer">rendering http://img43.imageshack.us/img43/9659/screenshoteoo.png</a></p>