在div中隐藏滚动条

Question

Hello budding web enthusiasts. I am afraid that I am in quite a pickle and need a helping hand. In a current web project, I ran into a sour wall. This here is the code. Take a gander. From the code, it does exactly what I want. But here is the problem . There are scrollbars on the div. I dont want any scrollbars on my divs. I tried overflow-y:scroll; and got rid of the horizontal scrollbar but the vertical scrollbar is still there. I tried a lot and searched for it but to no avail. How can I get rid of both the vertical and horizontal scrollbars in my divs with it still bieng able to scroll.

edit : I also need it to be cross browser functional. not only chrome.

HTML

<div id="content">
    <div id="left">
        <div class="richyPhoto"> </div>
    </div>

    <div id="right">
    </div>
</div>

CSS

body {
    overflow:hidden;
}
#content, html, body {
    height: 100%;
    width:100%;
    margin:0;
    padding:0;
}
#left {
    float: left;
    width: 50%;
    background: red;
    height: 100%;
    overflow: scroll;
}
#right {
    float: left;
    width: 50%;
    background: blue;
    height: 100%;
    overflow: scroll;
}

Answer 1

I would use this technique:

#parent{
height: 100%;
width: 100%;
overflow: hidden;
}

#child{
width: 100%;
height: 100%;
overflow: auto;
padding-right: 15px; /* Increase this value for cross-browser compatibility */
}

Here's a working Fiddle: http://jsfiddle.net/5GCsJ/954/

Answer 2

Here is a way to do it: HTML

<div id="content">
    <div id="left">
        <div class="richyPhoto"> </div>
    </div>

    <div id="right">
       <div class="richyPhoto2"> </div>
    </div>
</div>

CSS

body {
    overflow:hidden;
}
#content, html, body {
    height: 100%;
    width:100%;
    margin:0;
    padding:0;
}
#left {
    float: left;
    width: 50%;
    background: red;
    height: 100%;
    overflow: hidden;
}
.richyPhoto {
    width: 100%;
    height: 99%;
    border: 1px solid red;
    overflow: auto;
    padding-right: 15px;
}
#right {
    float: left;
    width: 50%;
    background: blue;
    height: 100%;
    overflow: hidden;
}
.richyPhoto2 {
    width: 100%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 15px;
}

Working Fiddle link: No scrollbars scroll