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

Just insert this div inside another div with overflow:hidden

Answer 2

I had a similar situation where I needed an absolutely placed element to be positioned partially to the right of the main content header. If the browser was wide enough to show it, I did NOT want to clip it (overflow: hidden;) but I also did not want to make the scrollbar appear if the browser was not wide enough.

Here is the code I used:

@media screen and (max-width: 1275px) {
  #header {
     overflow-x: hidden;
  }
}

Answer 3

You could add a media query to avoid scrolling at a certain point. So basically take the width of your main container and create a min-width media-query using that.

@media (min-width: 960px) {
    body {
       overflow-x: hidden;
    }
}

Should work for modern browsers.

Answer 4

scroll is may be you have placed relative position property to the containing div and it result the required div to go off the right by -50 but as relative to the main containing div not the browser viewable area.. if its parent div just inside the body tag or the parent div does not include any position property your code should work.. and again you can apply overflow:hidden property to wrapper div to hideout the unnecessary part

Answer 5

Just add overflow:hidden to the css. That should do the trick.

Answer 6

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/