title: Making wrapper/container responsive?
body: <p>I having a lot of trouble trying to make a wrapper that contains an responsive image slider, I want it to scale down accordingly when the window is re-sized, but I can't get it to, the image slider wont scale down. Can somebody please please tell me what I'm doing wrong? </p>
  
  <p>note* I only want to make it responsive on desktop and tablet down to 500px, mobile has a different look)</p>
  
  <p>(I apologize if its sloppy, I'm new to this)</p>
  
  <p>edit: heres a live link to it (not real images) : <a href="http://testjd.net46.net/" rel="nofollow">http://testjd.net46.net/</a>
  and the slider is overlapping the "Logo" when the browser windows is rezied can i stop this?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.cycle.all.js"&gt;&lt;/script&gt;
  &lt;script src="SpryAssets/SpryMenuBar.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $('#slider').cycle({ 
      fx:     'scrollHorz', 
      prev:   '#prev', 
      next:   '#next', 
      timeout: 0, 
      rev: false 
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;img src="header.png" width="2022" height="82" alt="header"id="table"&gt;
  
  &lt;img src="footer.png" width="2022" height="109" alt="footer" id="table2"&gt; 
  
  &lt;img src="Background.jpg" name="fsbg" width="2022" height="1460" id="fsbg"&gt;
  
  &lt;img src="title.png" alt="title" name="title" width="500" height="500" id="title"&gt;
  
  &lt;table width="90%" border="0" cellpadding="7" cellspacing="0" id="table3" name="table3"&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;img src="500x500/Animal-Ambition-2-100percent-new-with-logo.gif" width="500" height="500" alt="aa"&gt;&lt;img src="500x500/50 Cent - Pilot.png" width="500" height="500" alt="pilot"&gt;&lt;img src="500x500/50 Cent - Smoke.png" width="500" height="500" alt="smoke"&gt;&lt;img src="500x500/50 Cent - Everytime I Come Around.png" width="500" height="500" alt="everytime i come around"&gt;&lt;img src="500x500/50-Cent---Irregular-Heartbeat.gif" width="500" height="500" alt="irregular heartbeat"&gt;&lt;img src="500x500/50 Cent - Hustler.png" width="500" height="500" alt="hustler"&gt;&lt;img src="500x500/50 Cent - Twisted.png" width="500" height="500" alt="twisted"&gt;&lt;img src="500x500/50 Cent - Winners Circle.png" width="500" height="500" alt="winners circle"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;div id="wrapper"&gt;
    &lt;div id="container"&gt;
      &lt;div class="controller" id="prev"&gt;&lt;/div&gt;
      &lt;div id="slider"&gt;
      &lt;img src="500x500/Animal-Ambition-2-100percent-new-with-logo.gif" width="500" height="500" alt="AA"&gt; 
      &lt;img src="500x500/50 Cent - Pilot.png" width="500" height="500" alt="pilot"&gt;
      &lt;img src="500x500/50 Cent - Smoke.png" width="500" height="500" alt="smoke"&gt;
      &lt;img src="500x500/50 Cent - Everytime I Come Around.png" width="500" height="500" alt="everytime i come around"&gt;
      &lt;img src="500x500/50-Cent---Irregular-Heartbeat.gif" width="500" height="500" alt="irregular heartbeat"&gt;
      &lt;img src="500x500/50 Cent - Hustler.png" width="500" height="500" alt="hustler"&gt;
      &lt;img src="500x500/50 Cent - Twisted.png" width="500" height="500" alt="twisted"&gt; 
      &lt;img src="500x500/50 Cent - Winners Circle.png" width="500" height="500" alt="winners circle"&gt;
      &lt;/div&gt;
      &lt;div class="controller" id="next"&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  @font-face {
      font-family: 'my font' ;
      src: url(fonts/CuttyFruty.ttf) 
  }
  
  #wrapper {
      display: block;
      max-width: 660px;
      max-height: 500px;
      margin: auto;
      position: fixed;
      top: 0%; 
      bottom: 0%; 
      right: 5%;
  }
  
  #container {
      display: block;
      float: left;
      height: auto;
      width: 660px;
      overflow: aut;  
  
  }
  
  #prev {
      background-image: url(left%20button.png);
  
      background-position: center center;
      display: block;
      float: left;
      height: 500px;
      width: 80px;
      position: relative;
      z-index: 99;
      cursor: pointer;
  
  }
  
  #prev:hover {
      background-image: url(left%20button%20grey.png);
  }
  
  #next {
      background-image: url(right%20button.png);
      background-position: center center;
      display: block;
      float: right;
      height: 500px;
      width: 80px;
      position: relative;
      z-index: 99;
      cursor: pointer;
  }
  
  #next:hover {
      background-image: url(right%20button%20grey.png);
  }
  #slider {
      display: block;
      height: 500px;
      width: 500px;
      overflow: hidden;
      float: left;
      position: relative;
  
  }
  body {
      background-color: #000;
      color: #666;
  }
  #fsbg {
  
      width: 100%;
      height: auto;
      position: fixed;
      z-index: -100;
      left: 0px;
      top: 0px;
      min-height: 100%;
      min-width: 1040px;
  }
  #shadow {
      display: block;
      height: 550px;
      width: 550px;
      margin: auto;
      top: 0%;
      bottom: 0%;
      right: 15%;
      position: fixed;
  }
  
  #table {
      margin: 0;
      padding: 0;
      position: fixed;
      left: 0px;
      top: 0px;
      height: 82px;
      z-index: ;
  }
  #table2 {
      margin: 0 auto;
      padding: 0;
      left: 0px;
      bottom: -15px;
      position: fixed ;
      height: 100px;
      z-index: 0;
  }
  
  #table3 {
      left: 0px;
      position: absolute ;
      width: 100%;
      display: none;
  }
  textem {
      color: #FFF;
  }
  .textem2 {
      color: #666;
      text-align: right;
      font: 16px "my font" ;
  }
  
  #title {
      display: block;
      height: 500px;
      max-width: 100%;
      margin: auto;
      top: 0%;
      bottom: 0%;
      right: 55%;
      position: absolute;
  }
  
  @media screen and (max-width: 1000px) {
      #wrapper, #container, #slider {
          width: 100%;
          height: auto;
      }   
  }
  
  @media screen and (max-width: 500px) {
    #wrapper, #container, #slider {
      padding: 0px !important;
      display: none !important;
  
    }
  
    #prev {
        width: 80px;
        height: 200px;
        position: fixed;
        left: 20%;
  
        top: 65%;
        padding: 0px !important;
    }
  
    #next {
        width: 80px;
        height: 200px;
        position: fixed;
        right: 20%;
  
        top: 65%;
        padding: 0px !important; 
    }
  
    img {
      width: 100%;
      height: auto;
      margin: auto;
      padding: 0px;
      left: 0px;
      top: 0px;
      right: 0px;
      display: block;
    }
  
    #table3 {
      left: 0px;
      position: absolute ;
      width: 100%;
      display: block !important;
    }
  
    #table1 {
        z-index: 50;
        top: 0;
        position: fixed;
    } 
  
    #table2 {
      z-index: 50;
      bottom: 0;
      position: fixed;
      height: 10%;
    }
  
  }
  </code></pre>