title: How to remove scroll bar using overflow CSS HTML (Possible Positioning Conflict)
body: <p>I have tried everything to try and remove this bottom scroll bar but cant seem to figure it out. I'm not sure if it is something to do with the positioning.</p>
  
  <p>The image (banner) is supposed to be 2000px(width) by 400px(height) but I would like it to not effect the page size by adding the scroll bar.</p>
  
  <p><strong><a href="http://goo.gl/SsxDy" rel="nofollow">LIVE DEMO</a></strong></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#banner {
      margin:0 auto;
      background: #EAEAEA;
      position: relative;
      width:1000px;
      height:400px;
      display:block;
      float:none;
      top:160px;
  }
  #slideshow { 
      width: 1000px; 
      display:block;
      text-align:center; 
      position:absolute;
      left:-50%;
  }
  #slideshow &gt; div { 
      position: absolute; 
  
  }
  .images {
      overflow-y:visible;
      width:1000px;
      height:400px;   
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="banner"&gt;
      &lt;div id="slideshow"&gt;
          &lt;div&gt;&lt;a class="images" href="#"&gt;&lt;img src="AG/images/bulbs.png"&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div&gt;&lt;a class="images" href="#"&gt;&lt;img src="AG/images/cables.png"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  &lt;!--END banner --&gt;
  </code></pre>
  
  <p>Thank you in advance</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Is there a way to only add overflow to the banner rather than the whole page? For example the same as <a href="http://www.johnlewis.com/" rel="nofollow"><strong>EXAMPLE</strong></a></p>