css две колонки - одна фиксированная ширина

Question

Я хочу иметь два столбца (содержимое и боковое поле), где боковая панель будет иметь фиксированную ширину, а содержимое будет уменьшаться как неясное.

В какой-то момент они оба будут стекаться до 100% ширины, но сначала я хочу иметь контент. Проблема с этим решением заключается в том, что первый бокс-бокс.

Я не хочу использовать поплавки и процент, потому что я не хочу сжимать боковую панель.

HTML:

<aside class="sidebox"> <!-- i don't want this to come first after media query applied --> 
     sidebox 
    </aside> 
    <section class="content"> 
     content 
    </section> 

CSS:

.content { 
    margin-right:200px; 
    height:100px; 
    background-color:red; 
} 

.sidebox{ 
    width:180px; 
    float:right; 
    height:100px; 
    background-color:yellow; 
} 


@media (max-width: 500px) { 
    .sidebox { 
     float:none; 
     width: auto; 
    } 
    .content { 
     margin-right:0px; 
     } 
} 

DEMO:https://jsfiddle.net/72Lad2zf/

Answer 1

Вы можете использовать следующее:

.container { 
 
    display:table; 
 
    width:100%; 
 
} 
 
.content { 
 
    display:table-cell; 
 
    height:100px; 
 
    background-color:red; 
 
} 
 
.sidebox { 
 
    display:table-cell; 
 
    width:180px; 
 
    height:100px; 
 
    background-color:yellow; 
 
} 
 
@media (max-width: 500px) { 
 
    .content, .sidebox { 
 
     width:100%; 
 
     display:block; 
 
    } 
 
}

<div class="container"> 
 
    <section class="content">content</section> 
 
    <aside class="sidebox">sidebox</aside> 
 
</div>

Updated Fiddle

Answer 2

Вы должны изменить структуру HTML и необходимо использовать float в .content, но плавать не уменьшает ширину.

HTML

<section class="content"> 
    content 
</section> 
<aside class="sidebox"> 
    sidebox 
</aside> 

CSS

.content { 
    height:100px; 
    background-color:red; 
    float:left; 
    width:calc(100% - 200px); 
} 

working Demo