Resolucion 800x600, o 1024 se me desmonta todo

[martines]

Algunas cosas las e cambiado, pero sigue pasando lo mismo, por ejemplo al poner la resolucion, 800x600 solo se ve una parte, abajo me sale la barra desplazadora, tiro hacia la derecha y entonces no me sigue la imagen del head, se corta alli. Dejo otra vez el codigo.

Gracias a todos

Código PHP:

  body {background-color: #91aefe;
     margin:0%;
    }

#head {
      margin:0%; 
      margin-top:0%;
      background-image: url("../files/head.jpg");
      background-position:  left;
      background-repeat: no-repeat;
      height: 140px;
      width: 100%;
      }

#head p {
     text-align: center;
     color: #fff;
     font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
     font-weight: bold;
     font-style: oblique;
     padding-top: 40px;
     padding-left: 570px;
     margin-top: 0%;
     
       }
      
#menu {  
        width: 100%; 
        padding: 0%;  
        float:right; 
        padding:0%;
        height:auto;
        font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-weight: bold;
        background-image: url("../files/menu.jpg");
        background-repeat: no-repeat;
        height: 40px;
        margin-top: 0%;
        position: relative;
                }
        
#menu ul, li { list-style-type: none;
        }

#menu ul 
        { width:auto;
          margin:auto;
        }
        
#menu li {  
         display: inline;  
         position:relative;
         
         }  

/* separacio entre boto         
#menu li+li a {
         border-left: 1px solid #FFF; 
          }
          
*/          
#menu a {  
      color: #fff;
      text-decoration: none;  
      text-align: center;
      width: 1%; 
      margin-left: 130px;
      float: left;  
      padding: 7px; 
      display: block; 
      outline:none;
      cursor:pointer;
      position: relative;
        } 

#menu a:hover { /* background: #FFFFFF; fondo cuadro*/  
               color:#000000;
             }


#contenido { border: 3px solid #FF0000; 
             width:850px; 
             height:600px;
             padding:3px; 
             margin-top:50px; 
             margin-left: 180px;
             margin-bottom: 20px;
             float: left; 
             position: relative;
             }

#pie {
     width: 100%; 
     background-image: url("../files/pie.jpg");
     background-repeat: no-repeat;
     height: 80px; 
     margin-top: 0%; 
     clear: both;
     padding: 1px;
     position: relative;
     padding-bottom: 0%
     }
     
#pie p {
     text-align: center;
     color: #fff;
     font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
     font-weight: bold;
     margin-bottom: 0%;
     position: relative;
     }