Когда я меняю положение div с фиксированного на относительное в правиле мультимедиа, он переходит на следующую строку вместо того, чтобы оставаться перемещенным вправо. Когда я меняю положение на абсолютное, он накладывается на нижний колонтитул. Не могли бы вы помочь мне решить эту проблему.

jsfiddle: https://jsfiddle.net/EducateYourself/cz57tzb8/14/

HTML:

aaa

CSS:

#main {
    float: right;
    width: 798px;
    background-color:green;
}

#left {
    margin-top: 140px;
    float: left;
    width: 572px;
    background-color:yellow;
}

#right {
    margin: 140px 0px 0px 572px;
    float: right;
    width: 226px;
    position: fixed;
    background-color:red;
}
#footer {
    clear: both;
    height: 55px;
    width: 100%;
    background: blue;
    position: relative;
  z-index:-1;
}

@media screen and (max-height: 300px) {
    #right {
        margin: 156px 0px 0px 572px;
        float: right;
        width: 226px;
        position: relative;
    }

}

Ответы (1)

Удалить правое поле

#right {
    margin: 140px 0px 0px 0px;
    float: right;
    width: 226px;
    position: relative;
    background-color: red;
}

Также добавьте стиль для # left id в медиа-запросе, например,

@media screen and (max-height: 300px) {
    #right {
        margin: 140px 0px 0px 0px;
        float: right;
        width: 226px;
        position: relative;
    }
    #left{
      float:left;

    }

}

Демо: https: https://jsfiddle.net/cz57tzb8/22/

2022 WebDevInsider