div overflow is hidden but still can scroll using keyboard right arrow key

Question

I have a strange problem and for sure, I know this is a css issue but can't figure it out where is the exact problem.

In browser you cannot see 'whatwedo_container' as it's parent div is overflow hidden but when you press right key or in ipad when you scroll horizontally the white space is viewable.

My HTML code

<div class="aboutus">
    <div class="about_container">Some visible Content</div>
    <div class="whatwedo_container">Some hidden content</div>
</div>

CSS

.aboutus {
    background: #20407B;
    margin-top: 0;
    overflow: hidden;
    width:100%
}
.about_container {
    margin: 170px auto 0;
    position: relative;
    width: 1100px;
    background:green;
}
.whatwedo_container {
    background: none repeat scroll 0 0 transparent;
    position: absolute;
    right: -100%;
    width: 100%;
    overflow:hidden;
    background:red;
}

jsfiddle : http://jsfiddle.net/squidraj/wsYFh/

Any help please.Thanks in advance.

Answer 1

Add position: relative; to .aboutus

Check http://jsfiddle.net/wsYFh/2/