I have the following sample page:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
              "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>My Problem</title>
    <style type="text/css">
      body {
        width: 48em;
        font: 10pt sans-serif;
        color: black;
        background-color: white;
        margin-left: auto;
        margin-right: auto;
      }
      input {
        width: 6em;
      }
    </style>
  </head>
  <body>
    <table style="width: 100%;">
      <tr>
        <td style="width: 33%; text-align: left;">
          <input type="submit" name="submit" value="Left">
        </td>
        <td style="width: 33%; text-align: center;">
          <input type="submit" name="submit" value="Center">
        </td>
        <td style="width: 33%; text-align: right;">
          <input type="submit" name="submit" value="Right">
        </td>
      </tr>
      <tr>
        <td style="width: 33%; text-align: left;">
          <input type="submit" name="submit" value="Left">
        </td>
        <td style="width: 33%; text-align: center;">
        </td>
        <td style="width: 33%; text-align: right;">
          <input type="submit" name="submit" value="Right">
        </td>
      </tr>
    </table>
  </body>
</html>
The body is set to a relative width, and centers itself in the view port. The body is meant to be roughly 640px wide with a 10pt font, incase you are on a 640x480 screen. I want it to remained centered as the user changes the size of the font with the UA.

I also want to set up the input submit buttons without the use of a table. I'm having huge problems doing this. I can either get them set when all three buttons are present, but not when the center one is missing, or I can get them set with all three or only two buttons, but the buttons don't move apart as the page widens or narrows.

Any suggestions?