Как сделать эту коробку исправленной?

Question

Im новый для HTML/CSS и Im, играющий немного с поплавком. Что я хочу сделать, это сделать левую зеленую коробку фиксированной, когда она становится меньше 150 пикселей (НЕ экран, я имею в виду, это сама коробка. Когда вы играете вокруг, вы видите, что каждая ширина перемещается относительно%, и я хочу зеленый блок движется так же, как и сейчас, но когда этот ящик становится меньше 150 пикселей, он должен перестать получать меньше по ширине). Я пытался добиться этого, добавив min-width: 150px, но это просто убивает макет, когда он становится меньше, чтобы три коробки DIV больше не были в одной строке.

(Просьба игнорировать те много кодов, его только для практикующих)

#a { 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #ea0000; 
 
    } 
 

 
    #b { 
 
    width: 15%; 
 
    height: 200px; 
 
    background-color: #0aa699; 
 
    float:left; 
 
    } 
 

 
    #c1 { 
 
    width: calc(85%/2); 
 
    height: 200px; 
 
    background-color: #00ACEE; 
 
    float:right; 
 
    } 
 

 
    #c2 { 
 
    width: calc(85%/2); 
 
    height: 200px; 
 
    background-color: #ac2aa1; 
 
    float:right; 
 
    } 
 

 
    #d { 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #ff8300; 
 
    } 
 

 
    .clear:before, .clear:after {  
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
    }

 <header> 
 
      <div id="a"> 
 
      </div> 
 
     </header> 
 

 

 
     <div class="clear"> 
 

 
      <section> 
 
       <div id="b"></div> 
 
      </section> 
 

 
      <aside> 
 
       <div id="c1"></div> 
 
       <div id="c2"></div> 
 
      </aside> 
 

 
     </div> 
 

 

 
     <footer> 
 
      <div id="d"></div> 
 
     </footer> 
 

 

 

 

 

Answer 1

Я исправил вопрос здесь:

https://jsfiddle.net/vkfd2t6b/1/

Что я имею done устанавливается минимальная ширина от 150 пикселей до #b. Тогда обертка aside, где я установил ширину width: calc(100% - 150px);. Затем я плавал aside справа. Два элемента внутри aside затем устанавливаются на 50%.

#b { 
    min-width: 150px; 
}   
aside { 
    width: calc(100% - 150px); 
    float: right; 
} 
#c1, #c2 { 
    width: 50%; 
} 

Кроме того, я добавил медиа-запрос, так что, когда ДИВ больше, чем 150px он переключает aside ширина расчета на 15% вместо 150px

@media screen and (min-width: 1000px){ 
    aside { 
     width: calc(100% - 15%); 
    } 
}