Databases
StackOverflow2013
Postsdbo
POHow to Prevent Div from Scrolling
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to Prevent Div from Scrolling
    text
    copied!<p>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 1600x400 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 <a href="http://www.ea.com/ca" rel="nofollow noreferrer">EA Homepage</a> where the horizontal scrollbars only appear when the browser width is less then the content and not the banner.</p> <p>Image of what I want: </p> <blockquote> <p><img src="https://i.stack.imgur.com/nIETu.jpg" alt="enter image description here"></p> </blockquote> <p>Requirements:</p> <ul> <li>horizontal bar to be displayed only when browser width is less then .wrapper's width </li> <li>horizontal bar to NOT be displayed when browser width is less then .banner's width</li> <li>.banner must be visible all the way to the right side of the browser (cannot be cut off by .wrapper)</li> </ul> <p>I saw this <a href="https://stackoverflow.com/questions/12432688/prevent-horizontal-scrollbar-from-appearing-in-overflowing-div">other post</a> that is similar to mine but it was not solved. I tried a few of the suggested solutions but it did not help me.</p> <p>Code: <a href="http://jsfiddle.net/NZb3w/" rel="nofollow noreferrer">http://jsfiddle.net/NZb3w/</a></p> <pre><code>&lt;div class="wrapper"&gt; &lt;div class="banner"&gt; &lt;img src="http://www.placehold.it/1600x400"&gt; &lt;/div&gt; &lt;/div&gt; .wrapper { width: 960px; margin: 0 auto; background: #ccffff; height: 800px; padding-top: 50px; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload