Absolute div no overflow

Question

I have two divs:

#container{
    max-width:1000px;
    margin:0 auto;
}

Inside this container I have another div:

#image{
    position:absolute;
    margin-left-200px;
    width:500px;
    height:400px;
    background-image:url('images/image.png');
    left:50%;
    overflow:hidden;
}

When I resize my window to a very small viewport, the full image cannot be displayed. The user is able to scroll to the right. How can I prevent that?

Thanks!

@Jordy how about adding `overflow` to `html,body` - [Examlpe](http://jsfiddle.net/dCss6/)? — Vucko, Oct 05 '13 at 15:26
@Vucko, Not working. Indeed the scroll bar is not visible, but I'm still able to scroll to the right with my mousewheel. — Jordy, Oct 05 '13 at 22:43

score 1 · Answer 1 · answered Oct 05 '13 at 15:34

1

You need to add this to your CSS:

html {
    overflow:hidden;
}

Here is working jsfidde: http://jsfiddle.net/5tDbx/

answered Oct 05 '13 at 15:34

fred02138

3,323
1
14
17

Not working. Indeed the scroll bar is not visible, but I'm still able to scroll to the right with my mousewheel. – Jordy Oct 05 '13 at 22:43

Absolute div no overflow

1 Answers1