title: The boundaries of the <BODY> and <DIV>s are offset upon resize. How do I fix?
body: <p>well, I've got a straightforward layout,
  but there is a problem with boundaries,
  when I resize the window, the content gets outside the boundaries.</p>
  
  <p>that's how it looks like:
  <a href="http://img819.imageshack.us/img819/1893/aproblem.png" rel="nofollow noreferrer">Boundaries offset http://img819.imageshack.us/img819/1893/aproblem.png</a></p>
  
  <p>I'd would be glad if you could offer a solution...</p>
  
  <p>Dunno what's causing it.</p>
  
  <p>Note, please don't change the wrapper thing, for that's really the only layout that worked for my site... But I think its possible to modify the header and the foot, or perhaps put some more wrappers, if I only knew where.</p>
  
  <p>Thanks!</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body{
  border:3px solid #FFAD17;
  background-color:#FFF;
  border-radius:7px;
  font:9.5pt Tahoma;
  margin:0px;
  padding:0px;
  }
  html {
  margin:0px;
  padding:0px;
  }
  
  div.header{
      background-image:url('http://img804.imageshack.us/img804/4743/testcj.png');
      background-position:top;
      background-size:100% 100%;
      background-repeat:repeat-x;
      padding: 3px;
      }
  div.wrapper{
      float:left;
      }
  div.context_wrapper{
      margin-left:158px;
      padding: 3px;   
      }
  div.context{
      float:left;
      }
  div.menu{
      text-align:center;
      padding: 3px;
      width:140px;
      float:left;     
      }
  div.footer{
      background-image:url('http://img198.imageshack.us/img198/9422/test2fy.png');
      background-position:bottom;
      background-size:100% 100%;
      background-repeat:repeat-x;
      width:auto;
      padding: 3px;
      clear:both;     
      }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="header"&gt;Head&lt;/div&gt;
  &lt;div class="wrapper"&gt;
      &lt;div class="menu"&gt;Menu&lt;/div&gt;
      &lt;div class="context_wrapper"&gt;
          &lt;div class="context"&gt;
              ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;Foot&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>