Hide a div if it overlaps another div

Question

I have my main content in the center of the page about 900px wide. on a large screen there is enough space between the right margin of my content and the right side of the browser window that I can display a small 100x100px div in the bottom right corner and it looks good because there is no overlap between that div and the main content. When the screen size is less that div which is relatively positioned overlaps with the bottom right corner of my content. How can I set the display=none of the div if it comes within 20px of my content? Thanks

Answer 1

I'd go for a pure CSS solution here. Sounds like a perfect case for media queries:

#rightdiv {
    position: relative;
    width: 100px;
    height: 100px;
}

@media screen and (max-width: 1000px) {
    #rightdiv {
        display: none;
    }
}

That CSS will only display the #rightdiv element when the browser window size has at least 1000px width. If it gets smaller, it applies the display: none property.

Example: http://jsfiddle.net/7CCtH/