title: How can I prevent horizontal scrolling when child elements extend beyond the width of the parent div?
body: <p>I've created a banner for my website that's made up of 3 iPhone images side-by-side, using background images and relative positioning for each. However, I'm having issues with the horizontal scrolling. That is even though the div's containing each iphone image extend beyond the width of the parent .content div, I don't want there to be a scrollbar when the overflow content isn't able to fit the browser width. Scrollbars should only be shown if the browser width is below 960px.</p>
  
  <p>A similar effect is presently seen on <a href="http://www.apple.com/" rel="nofollow" title="Apple's homepage">Apple's homepage</a>, where the hand/wrist reside "outside" the website's container, but no horizontal scrollbars are visible unless the browser's width is below 990px wide.</p>
  
  <p>I hope I've explained this clearly, please let me know if it's not clear.</p>
  
  <p>Here's the code I'm using:</p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;div id="iphone-a"&gt;&lt;/div&gt;
      &lt;div id="iphone-b"&gt;&lt;/div&gt;           
      &lt;div id="iphone-c"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>.content {
      margin: 0 auto;
      width: 960px;
      height: auto;
      text-align: left;
      overflow-x: visible;
      }
  
  #iphone-a {
      z-index: 1;
      position: relative;
      left: 50%;
      bottom: 0;
      margin-left: -306px;
      height: 657px;
      width: 590px;
      background: url(images/banner.png) 0px 0px;
      }
  
  #iphone-b {
      z-index: 0;
      position: relative;
      top: -545px;
      left: 50%;
      margin-left: -732px;
      height: 319px;
      width: 590px;
      background: url(images/banner.png) 0px -658px;
      }
  
  #iphone-c {
      z-index: 0;
      position: relative;
      top: -864px;
      left: 50%;
      margin-left: 144px;
      height: 319px;
      width: 590px;
      background: url(images/banner.png) 0px -658px;  
      }
  </code></pre>