How can I hide an element off the edge of the screen?

Issue

I've got a div that I want to position partially off-screen like so:

div {
    position: absolute;
    height: 100px;
    width: 100px;
    right: -50px;
    top: 50px;
}

But this increases the size of the page, allowing it to be scrolled to the right. Is there any way to keep half of this div hidden and prevent scrolling to view it?

Solution

Yes, just create an enclosing div with overflow: hidden, like this:

.outer {
  overflow: hidden;
  position: relative;
}
.inner {
  position: absolute;
  height: 100px;
  width: 100px;
  right: -50px;
  top: 50px;
}

<div class="outer">
  <div class="inner">
    CONTENT
  </div>
</div>

Example: http://jsfiddle.net/Uj3eQ/

Answered By - jackJoe