CSS три колонки изменения размера вопроса

У меня есть веб-макет, который в настоящее время выглядит так:

Черный столбец (средний столбец) имеет фиксированную ширину (728 пикселей). Это CSS для него:

width: 728px;
margin-left: auto;
margin-right: auto;

Затем у меня есть две красные полосы на противоположных сторонах экрана. Например, CSS на панели слева:

background: red;
height: 100%;
float: left;
width: 300px;

... и справа:

background: red;
height: 100%;
float: right;
width: 300px;

Тем не менее, я хочу сделать так, чтобы красные полосы отрегулировали их ширину АВТОМАТИЧЕСКИ в соответствии с размером экрана. Тем не менее, в то же время я хочу, чтобы он НЕ воздействовал на среднюю черную полосу (728 пикселей).

Другими словами, я хочу, чтобы красные полосы шли вверх по средней черной полосе, не влияя на размер (независимо от размера экрана).

Как видно на моем изображении, это не работает, так как красные полосы НЕ идут против края поля. Я уже пробовал такие вещи, как auto auto, initial и inherit. Ничего не работает.

Редактировать:

Это HTML-структура:

<div id="container">
    <div id="left-bar">
    </div>
    <div id="right-bar">
    </div>
    <div id="middle-column">
    </div>
</div>

CSS для контейнера выглядит следующим образом:

width: 100%;
height: 100%;