CSS3 Clipping divs

Question

Code available at http://jsfiddle.net/rSSXu/

<div id="parent">
    <div id="child">Child</div>
</div>​

#parent {
    margin-left:auto;
    margin-right:auto;
    height:200px;
    width:50%;
    background:#eee;
    overflow:none;

}

#child {
    width:10%;
    height:10%;
    margin:auto;
    background:red;
    -webkit-transform: translate(0px, 300px); 

}

I have the following setup, and I would like the parent div to "clip" so that anything outside it is hidden. A little bit like overflow:none, but that also applies to translates. Is there a way to achieve this? Thanks, Chris

Answer 1

I don't remember using overflow: none, try overflow: hidden