Horizontal Scrollbar when reducing browser window

Question

Good day,

I've been doing some modifications to this website and the owner wants to have a horizontal scroll bar appearing when the browser window is reduced to a size that is smaller than the 'container' of the website. Right now it doesnt appear. I think that my main CSS is responsible for this. This CSS has overflow-x:hidden; and overflow-y:auto; because it is needed for my "jquery sticky footer' to work properly.

How can I workaround this and let this have a scroll bar horizontally on the browser window when I reduce it ? It's costing me some braincells now.

This is my CSS , what I think is responsible for not letting me have the scrollbar. BTW when I put overflow-x: auto; the scrollbar appears no matter what window size i have.

body, html {
    margin: 0;
    padding: 0;
    text-align: center;
    overflow-x: hidden;
    overflow-y: auto;

Answer 1

Do you have anything inside body or HTML with a fixed size big enough to always make the scroll bar appear when you put overflow-x: auto? Where is this page located? If I start poking around with firebug, it might be able to help you out if it's publicly accessible.

-Brian J. Stinar-

Answer 2

overflow-x: hidden;

Its therefore hidden no matter what.

You say when you put auto it shows the scrollbar no matter what. This is likely because the 'container' is wider than the screen space available.

Maybe shrink your container to a smaller size will remove this, and only provide when the window is too thin. Be aware of other objects on the page which will widen the container.