Question

I have a div that is positioned with a negative margin so that it will be hidden and I will be able to fly it into the screen. However, I am able to scroll to the right and see it. I tried to change the overflow-x property in my body and html tags to hidden, and that didn’t work. What am I doing wrong?

My div is positioned with margin-right:-800px and nothing seems to work!

---

EDITED CODE

CSS code:

Hidden div:

.card{
    z-index:21;
    position:absolute;
    right:-800px;
    background:white;
    border:1px solid black;
    margin:auto;
    text-align:left;
    padding:20px;
    visibility:hidden;
    -webkit-box-shadow: 5px 5px 5px rgba(110,110,110,.7);
    -webkit-transform:rotate(-100deg);
    -webkit-transition:right .5s, -webkit-transform .5s;
}

My overflow attempt:

html {
    overflow-x:hidden;
    overflow-y:visible;
}

Answer 1

As @Pranav stated, we really don’t know how you are creating the animation. However, here’s a working example of some animation similar to what you are describing: http://jsfiddle.net/Ktt4Z/2/.

JavaScript

$('#box').animate({  textIndent: 0 }, {
    step: function(now,fx) {
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
    },
    duration:'slow'
},'linear');​

HTML

<div class="card">
    This is a test. This is a test.
</div>​

Also, here’s a great resource on CSS overflow:
http://www.brunildo.org/test/Overflowxy2.html

Finally, when posting a question it’s best to post your code, an simple example using JSFiddle if possible, and anything you’ve tried. This will help the community in researching and discovering an answer to your question.

---

EDIT 0

Try:

display: none;

Instead of:

visibility:hidden;

Also, there’s some helpful articles on the interweb on the difference between visibility and display. For example, this article states the following:

On the surface display: none might seem to be the same is visibility:
hidden, but it isn’t. The big difference is in that point I called out
above.

visibility: hidden – the element stays in the normal document flow

display: none – the element is removed from normal document flow so
surrounding html elements collapse to close the space