css: right floated div переходит на следующую строку при изменении своего положения

Question

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

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

HTML:

<div id="main"> 
<div id="left"> 
aaa 
</div> 
<div id="right"> 
bbb 
</div> 
</div> 
<div id="footer"> 
ccc 
</div> 

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

} 

Answer 1

Удалить правый край

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

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

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

    } 

} 

Demo: https: https://jsfiddle.net/cz57tzb8/22/