Скрыть div, если он перекрывает другой div

Question

У меня основное содержание в центре страницы шириной около 900 пикселей.на большом экране достаточно места между правым полем моего контента и правой стороной окна браузера, чтобы я мог отобразить небольшой делитель размером 100x100 пикселей в нижнем правом углу, и это выглядит хорошо, потому что между этим делом иосновное содержание.Когда размер экрана меньше, то div, который относительно расположен, пересекается с нижним правым углом моего контента.Как я могу установить отображение = нет div, если оно находится в пределах 20 пикселей от моего контента?Спасибо

Answer 1

Я бы пошел за чистое решение CSS здесь.Звучит как идеальный случай для media queries:

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

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

Этот CSS будет отображать элемент #rightdiv только тогда, когда размер окна браузера имеет ширину не менее 1000 пикселей.Если он становится меньше, он применяет свойство display: none.

Пример : http://jsfiddle.net/7CCtH/

Answer 2

Что касается медиазапросов, не знакомых с IE, предлагаю вам любезно решить эту проблему :

DEMO

используемый код:

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();
});

или как ЭТО