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 es within 20px of my content? Thanks

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 es within 20px of my content? Thanks

• javascript
• jquery
• css
• html
• positioning

• Can you post a JS Fiddle demo that reproduces your mark-up, so that we can see what you're working with and how to best help you? – David Thomas Commented Aug 2, 2011 at 9:24

2 Answers 2

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/7CCtH/

As for media queries are not familiar with IE I suggest you kindly this solution for your problem:

DEMO

code used:

function hideSmall(){
    var smallW = $('#small').outerWidth(true);
    var winW = $(window).width();
    var mainW = $('#main').outerWidth(true);
    var calculateW = (winW-mainW)/2;

    if ( calculateW <= smallW ){
         $('#small').hide();   
    }
    else{
         $('#small').show();
    }
}
hideSmall();

$(window).resize(function(){
   hideSmall();
});

or like THIS