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

Question

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

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


        

Answer 1

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;
}

  

    CONTENT
  

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