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

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;
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 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;
}
<div class="outer">
<div class="inner">
CONTENT
</div>
</div>
Example: http://jsfiddle.net/Uj3eQ/

Answer 2

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

Answer 3

Just insert this div inside another div with overflow:hidden

Answer 4

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 5

Another solution is to use margin-left: 100%;
And if you wanted to play with the positioning a bit, you can do something like margin-left: calc(100% + 10px);
And another alternate way is to do float: right; and then play around with margin-right -50px; where 50px is the width of the hidden div. You could even have a neat transition if you animate the margin-right if you were making a menu.

Answer 6

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 7

Old question, but answering for new visitors. This should do it:
.offscreen {
position: fixed;
height: 100px;
width: 100px;
right: 0px;
top: 50px;
transform: translateX(50px);
}
position: fixed is placing the element relative to the viewport (browser window). Think of fixed as being the same as absolute, except it's the relative to the viewport, ignoring all other divs.
Then we place the element on the top right corner with top: 0 and right: 0
We have this:
______________
| [Element]|
| |
| |
| (Viewport) |
| |
| |
|______________|
Then we move the element to the left by 50px with transform: translateX(50px):
______________
| [Ele|ment]
| |
| |
| (Viewport) |
| |
| |
|______________|
But seeing that the element has a width of 100px and you're moving by 50px, which is half of the width, then it's better to do it like this instead: transform: translateX(50%)
The advantage of using percentages is that even if you later change the width to 120px for example, you won't have to manually the change from translateX(50px) to translateX(60px). By using percentage the math is done for you.
Note: This is not affected by zooming in/out and also does not cause overflow (scrolling).

Answer 8

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