espekia espekia - 3 months ago 14
CSS Question

CSS- hide element off the right of the screen

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?

Answer

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

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

the css:

.outer {
   overflow: hidden;
   position: relative;
}

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

EDIT: I forgot to add the position: relative to the .outer div as pointed by Alex Ackerman

example: http://jsfiddle.net/Uj3eQ/