Question

I am trying to create a website where I have .wrapper that runs vertical along the middle of the page, and .banner that spreads horizontal near the top of the page. The .banner will contain a 1600×400 image along with some links. What I am trying to do is create an effect where the banner will ‘run off’ the page. To do this, I want the horizontal scroll bar to only appear when the browser width is less then .wrapper width. I am trying to achieve the effect of something like the EA Homepage where the horizontal scrollbars only appear when the browser width is less then the content and not the banner.

Image of what I want:

Requirements:

• horizontal bar to be displayed only when browser width is less then
  .wrapper’s width
• horizontal bar to NOT be displayed when browser width is less then .banner’s width
• .banner must be visible all the way to the right side of the browser (cannot be cut off by .wrapper)

I saw this other post that is similar to mine but it was not solved. I tried a few of the suggested solutions but it did not help me.

Code: http://jsfiddle.net/NZb3w/

<div class="wrapper">
    <div class="banner">
        <img src="http://www.placehold.it/1600x400">
    </div>
</div>

.wrapper {
    width: 960px;
    margin: 0 auto;
    background: #ccffff;
    height: 800px;
    padding-top: 50px;
}

Answer 1

Maybe try

.wrapper {
  min-width: 960px; 
  overflow-x:auto;
  width: 100%;
}

This will allow the width to of the .wrapper to stretch greater than 960px, but once it hits 959px, it’ll add the scrollbar.