title: Prevent footer from overlapping
body: <p>I have read numerous posts here regarding this same issue, however I couldn't find
  a relevant solution to my problem....</p>
  
  <p>My current resolution is <code>1440x900</code> and the site behaves well, meaning that the footer stops right below my menuwrap.</p>
  
  <p>When I change resolution, the footer overlaps it when I scroll all the way down.</p>
  
  <p>Thanks in advance!</p>
  
  <p>My HTML is:</p>
  
  <pre><code>    &lt;body&gt;
              &lt;div id="mainwrap"&gt;
                  &lt;div id ="menuwrap"&gt;
                      &lt;a href="index.html"&gt;&lt;div id="menulogo"&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div id="mainarea_wrap"&gt;
                                   (A LOT OF TEXT-- like 30 lines or so)
                  &lt;/div&gt;
  
                  &lt;div id="footer"&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/body&gt;
  </code></pre>
  
  <p>My CSS is:</p>
  
  <pre><code>body{
  padding:0;
  margin:0;
  background:url(bg.gif);
  background-attachment:fixed;
  font-family: Verdana, Arial;
  font-size: 0.8em;
  }
  
  #mainwrap{
  margin-top:30px;
  width:800px; 
  height:600px; 
  position:relative; 
  margin-left:auto;
  margin-right:auto;
  }
  
  #mainarea_wrap{
  width:600px;
  height:auto;
  position:relative;
  left:201px;
  text-align:justify;
  padding:20px;
  margin-bottom:-1px;
  border-top:solid 1px;
  border-right:solid 1px;
  border-bottom:solid 1px;
  border-color:#D8D8D8;
  border-left:solid gray 1px;
  border-top-right-radius:10px 10px;
  border-bottom-right-radius:10px 10px;
  background-color:#F0F0F0;
  }
  
  #menuwrap{
  height:549px;
  width:200px;
  position:fixed;
  padding-top:20px;
  padding-left:20px;
  background-color:white;
  border:solid 1px;
  border-color:#D8D8D8;
  border-top-left-radius:10px 10px;
  border-bottom-left-radius:10px 10px;
  }
  
  #menulogo{
  width:200px;
  height:150px;
  position:relative;
  background:url(jmedicas.png) no-repeat;
  margin-top:-13px;
  margin-left:-20px;
  }
  
  #footer{
  position:relative;
  width:100%;
  height:25%;
  border:solid 1px;
  border-bottom:none;
  border-color:#D8D8D8;
  padding:20px;
  padding-top:0px;
  background: #ffffff; /* old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* ie */
  border-top-right-radius:10px 10px;
  border-top-left-radius:10px 10px;
  }
  
  .shadow {
  -moz-box-shadow: -5px 4px 8px #000;
  -webkit-box-shadow: -5px 4px 8px #000;
  box-shadow: -5px 4px 8px #000;
  /* For IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
  /* For IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
  }
  </code></pre>