title: Extra white space on right hand side on webpage
body: <p>I developed a site and it's working fine. It's just that when I view on smaller window a white space appear on the right hand side.</p>
  <p>I found the cause is the width:76% set for div=middle. I tried removing the width and adjusting the middle layout using padding. Again it needs 76% of width to get fixed. Yet the extra space appears.</p>
  <p>How to get rid of it? here I attached the css part and html of my scripting. Thanks in advance.</p>
  <p>CSS:</p>
  <pre><code>body {
      font-family: Calibri;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
  }
  .wrapper {
      min-height: 100%;
      position: absolute;
  }
  .left {
      background-image: url('images/SideTexture_01.png');
      background-repeat: repeat-y;
      width: 12%;
      height: 100%;
      position: absolute;
  }
  .middle {
      width: 76%; /* deactivated to remove extra space on right side */
      height: 100%;
      position: relative;
      float: right;
      margin-right: 12%;
      padding-left: 12%;
      z-index: 99px;
  }
  .header {
      background-color: #cf2122;
      width: 100%; /*774*/
      height: 30px;
      position: relative;
  }
  .footer {
      background-color: #373435;
      width: 100%; /*774*/
      height: 40px;
      text-align: justify;
      margin: 0 auto;
      clear: both;
  }
  .border {
      border: 1px solid #DFDFDF;
      padding: 5px;
  }
  .border-index {
      border: 1px solid #EAEAEA;
      padding: 10px;
  }
  .right {
      background-image: url('images/side_texture-2.png');
      background-repeat: repeat-y;
      width: 12%;
      height: 100%;
      position: absolute;
      float: left;
      z-index: -1;
      margin-left: 88%;
  }
  .disclaimer {
      color: #FFF;
      float: left;
      font-size: 9px;
      width: 60%;
      text-align: justify;
      padding-left: 10px;
      padding-top: 2px;
  }
  .copyright {
      color: #FFF;
      float: right;
      font-size: 9px;
      position: relative;
      float: right;
      width: 31%;
      padding-top: 15px;
  }
  A.menu-top:link {
      COLOR: #FFFFFF;
      TEXT-DECORATION: none;
      FONT-WEIGHT: none;
      FONT-FAMILY: Calibri;
      FONT-SIZE: 13px;
      text-transform: uppercase;
  }
  A.menu-top:active {
      COLOR: #FFFFFF;
      TEXT-DECORATION: none;
      FONT-WEIGHT: none;
      FONT-FAMILY: Calibri;
      FONT-SIZE: 13px;
      text-transform: uppercase;
  }
  A.menu-top:visited {
      COLOR: #FFFFFF;
      TEXT-DECORATION: none;
      FONT-WEIGHT: none;
      FONT-FAMILY: Calibri;
      FONT-SIZE: 13px;
      text-transform: uppercase;
  }
  A.menu-top:hover {
      COLOR: #FFFFFF;
      text-decoration: underline;
      FONT-WEIGHT: none;
      FONT-FAMILY: Calibri;
      FONT-SIZE: 13px;
      text-transform: uppercase;
  }
  .separate {
      font-size: 15px;
      color: #FFFFFF;
      FONT-FAMILY: Calibri;
  }
  A.menu:link {
      COLOR: #fff;
      TEXT-DECORATION: none;
      FONT-WEIGHT: none;
      FONT-FAMILY: Calibri;
      FONT-SIZE: 13px;
      text-transform: uppercase;
  }
  A.menu:active {
      COLOR: #fff;
      TEXT-DECORATION: none;
      FONT-WEIGHT: none;
      FONT-FAMILY: Calibri;
      FONT-SIZE: 13px;
      text-transform: uppercase;
  }
  A.menu:visited {
      COLOR: #fff;
      TEXT-DECORATION: none;
      FONT-WEIGHT: none;
      FONT-FAMILY: Calibri;
      FONT-SIZE: 13px;
      text-transform: uppercase;
  }
  A.menu:hover {
      COLOR: #fff;
      text-decoration: underline;
      FONT-WEIGHT: none;
      FONT-FAMILY: Calibri;
      FONT-SIZE: 13px;
      text-transform: uppercase;
  }
  #body_content {
      padding: 0px;   
  }
  #footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 50px;
      background: #000000;
      padding-top: 12px;
      padding-bottom: 0px;
  }
  .require {
      font-family: Calibri;
      font-weight: bold;
      color: #CC0000;
  }
  td {
      font-family: Calibri;
      font-size: 12px;
      color: #3a3a3a;
  }
  th {
      font-family: Calibri;
      color: #3a3a3a;
  }
  .input {
      border: 0;
      color: #3a3a3a;
      font-size: 10px;
      text-align: left;
  }
  .input_contact {
      border: 1px solid #999999;
      background-color: #F6F7F1;
      color: #3a3a3a;
      height: 15px;
      font-size: 12px;
      width: 234px;
  }
  @media only screen and (max-width: 1280px) {
      td.search {
          width: 425px;
      }
  }
  @media only screen and (min-width: 1197px) {
      td.search {
          width: 180px;
      } 
  }
  @media only screen and (min-width: 1289px) {
      td.search {
          width: 170px;
      }
  }
  @media only screen and (min-width: 1346px) {
      td.search {
          width: 120px;
      }
      .copyright {
          width: 23%;
      }
      .body-content {
          padding-right: 250px;
      }
  }
  .textarea {
      border: 1px solid #999999;
      background-color: #F6F7F1;
      color: #3a3a3a;
      font-size: 12px;
  }
  .star {
      font-family: Tahoma;
      color: red;
      font-size: 16px bold;
  }
  .notice {
      font-family: Tahoma;
      color: #0066FF;
      font-size: 14px bold;
  }
  .error {
      font-family: Tahoma;
      color: #CC0000;
      font-size: 14px bold;
  }
  .require {
      font-family: Tahoma;
      font-weight: bold;
      color: #CC0000;
  }
  .about-us-image {
      width: 99%;
      height: 40%;
      background-image: url('images/AboutUsBg_01.png'),url('images/AboutUsBg_01.png'),url('images/AboutUsBg_01.png');
      z-index: -1;
  }
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;body leftmargin=&quot;0&quot; topmargin=&quot;0&quot; rightmargin=&quot;0&quot; bottommargin=&quot;0&quot; marginheight=&quot;0&quot;&gt;
      &lt;div class=&quot;wrapper&quot;&gt;
          &lt;div class=&quot;left&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;middle&quot;&gt;
              &lt;div class=&quot;header top_menu&quot;&gt;&lt;?php include 'top-menu.php'; ?&gt; &lt;/div&gt;
              &lt;div id=&quot;body_content&quot;&gt;
                  &lt;table height=&quot;600&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; align=&quot;left&quot;&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;table height=&quot;600&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;
                                          &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
                                              &lt;tr&gt;
                                                  &lt;td style=&quot;padding-top:10px; padding-left:50px; padding-right:50px; padding-bottom:230px; text-align:justify;&quot;&gt;
                                                      &lt;?php include('product-include.php'); ?&gt;
                                                      &lt;br /&gt;  &lt;br /&gt;
                                                      &lt;?php echo $row_RecTitle['FullTxt']; ?&gt;
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/table&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;div class=&quot;footer&quot; style=&quot;top:628px;&quot;&gt;
                  &lt;?php include('footer.php'); ?&gt;
              &lt;/div&gt;
              &lt;div class=&quot;right&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <hr />
  <h2>Update</h2>
  <p><img src="https://i.stack.imgur.com/7LwbT.jpg" alt="Here I have added the image showing my problem" /></p>
  <p>Image hidden for copyright purpose, This problem only when browser window resized.</p>
  <p>Thanks again ..</p>