title: HTML Table within DIV element keeps moving around as browser resizes
body: <p>I am trying to produce a webpage with a login form. The login form components are placed in a table wich is inside a <code>&lt;div&gt;</code> element; it's all done but now I'm facing resizing issues: whenever I resize my browser, the table elements keep moving around and it doesn't looks nice...
  I want the login form to be fixed and not to move around if I resize the browser in width or height (or both, in diagonal).</p>
  
  <p>My HTML template code can be seen next:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
          &lt;link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"&gt;
          &lt;link rel="icon" href="images/favicon.ico" type="image/x-icon"&gt;
          &lt;title&gt;GIETINF | Management&lt;/title&gt;
          &lt;script type="text/javascript" src="scripts/onClick.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="box"&gt;
              &lt;form method="POST" action="login.php"&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                        &lt;td align="right"&gt;&lt;p id="text"&gt;E-mail:&lt;/p&gt;&lt;/td&gt;
                        &lt;td align="left"&gt;
                          &lt;input type="text" name="email" value="user@server.pt" onFocus="this.value=''"&gt;
                      &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                        &lt;td align="right"&gt;&lt;p id="text"&gt;password:&lt;/p&gt;&lt;/td&gt;
                        &lt;td align="left"&gt;&lt;input type="password" name="password"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;table id="little_box"&gt;
                              &lt;tr&gt;
                                  &lt;td align="left"&gt;&lt;input type="submit" value="Log In"&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td align="left" colspan="2"&gt;&lt;input type="reset" value="Reset values"&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/form&gt;
  
              &lt;table id="little_box2"&gt;
                  &lt;tr&gt;
                      &lt;td align="left"&gt; &lt;input type="submit" onClick="OpenEmailtoadmin()" value="Register"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  
  
          &lt;/div&gt; 
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And my CSS for this page:</p>
  
  <pre><code>body
  {
  background-image:url('../images/logo.jpg');
  background-repeat:no-repeat;
  background-position: 20% 0%;
  background-attachment: fixed;
  background-color: #3A4147;
  background-size: fixed;
  }
  
  
  
  input[type="text"] {
  border: 2px solid #F7921F;
  background: #ffffff;
  color:#969999;
  }
  
  input[type="password"] {
  border: 2px solid #F7921F;
  background: #ffffff;
  color:#969999;
  }
  
  input[type="submit"] {
  background: #341243;
  border: 2px solid black;
  color:#F7921F;
  }
  
  input[type="submit"]:hover {
  border: 2px solid black;
  filter:alpha(opacity=50);-moz-opacity:.5;opacity:.5;
  background: #FFFFFF;
  color: #000000;
  }
  input[type="submit"]:focus  {
  border: thin #000000 solid;
  background: #FFFFFF;
  color: #000000;
  }
  input[type="submit"]:focus:hover {
  border: thin #000000 solid;
  filter:alpha(opacity=100);-moz-opacity:1;opacity:1;
  background: #FFFFFF;
  color: #000000;
  }
  input[type="reset"] {
  background: #341243;
  border: 2px solid black;
  color:#F7921F;
  }
  input[type="reset"]:hover {
  border: 2px solid black;
  filter:alpha(opacity=50);-moz-opacity:.5;opacity:.5;
  background: #FFFFFF;
  color: #000000;
  }
  input[type="reset"]:focus  {
  border: thin #000000 solid;
  background: #FFFFFF;
  color: #000000;
  }
  input[type="reset"]:focus:hover {
  border: thin #000000 solid;
  filter:alpha(opacity=100);-moz-opacity:1;opacity:1;
  background: #FFFFFF;
  color: #000000;
  }
  
  #registration_button {
  background: #341243;
  border: 2px solid black;
  color:#F7921F;
  }
  #registration_button:hover {
  border: 2px solid black;
  filter:alpha(opacity=50);-moz-opacity:.5;opacity:.5;
  background: #FFFFFF;
  color: #000000;
  }
  #registration_button:focus  {
  border: thin #000000 solid;
  background: #FFFFFF;
  color: #000000;
  }
  #registration_button:focus:hover {
  border: thin #000000 solid;
  filter:alpha(opacity=100);-moz-opacity:1;opacity:1;
  background: #FFFFFF;
  color: #000000;
  }
  
  #box
  {
  position: absolute; 
  width: 50%;
  height: 30%;
  left: 50%;
  top: 35%;
  
  }
  
  #little_box
  {
  position: relative;
  width: 20%;
  height: 10%;
  left: 15.4%;
  top: 35%;
  }
  
  #little_box2
  {
  position: relative;
  width: 20%;
  height: 10%;
  left: 24.4%;
  top: 35%;
  }
  
  #box_error
  {
  position: relative;
  width: 50%;
  height: 30%;
  left: 39%;
  top: 65%;
  }
  
  #text
  {
  font-family:arial;
  color:white;
  font-size:14px;
  }
  </code></pre>
  
  <p>I'm sorry for the long text; I saw other issues like this solved but I don't seem to get a nice solution out of them.
  Thanks in advance!</p>