CSS Vertical Background overlay and a Horizontal Scrollbar appears

Question

Not sure how to best ask my question. And I can't yet post screenshots. :( This issue does happen in mere current coding practices. You can currently even see this issue happening on Facebooks home page.

Here's my URL: www.alpacanation.com

How to replicate live

Grab the right hand side of your browser and pull inwards. Eventually a scroll bar appears. Not necessarily bad. As I have a fixed with here. However… Notice the scrollbar is the length of the background color up in the top of my header which is actually creating a "Curtain" like effect.

Make matters worse: If on other high level parent elements like .Footer or .Page you play around with overflow and position relative the curtain will then begin overlaying on top of the entire site.

Check out Facebook: They often have this issue as well. Obviously most don't notice it as it's not going over top of the content.

In either case I know there is something not right. Help appreciated!

Answer 1

Add something like this to your CSS:

body { min-width: 980px; }

You have min-width: 980px; set in many of the elements on your page, but not on html, body, or .container. Once the viewport is smaller than this, these elements will overflow html and give you the scrollbars you're seeing.

But this doesn't make html any bigger. It--and its background--is still at the viewport size. This is why you get the "curtain" effect when you scroll.

Setting width: 100% on html doesn't fix this; this only sets html to 100% width of the browser window. If you're going to use min-width, make sure you you don't just apply it to elements that hold your content, but also those that have your backgrounds.

Answer 2

to fix this, add

html, body {
    min-width: 980px
}

in your www.alpacanation.com/styles.css:40, then you are done. :)

EXPLANATION: the problem is this container,

<!— stat container —>
<div class=“container”>
    <!— START FOOTER MENU SECTION —>

that container has width:980px which screws up the view because it forces that container to stay at 980px wide while the rest is shrinking, thus creates the ‘curtain’ like effect.