Сделайте 2 деления, заполнив остальную часть страницы

В настоящее время я работаю над веб-сайтом, но важно, чтобы он соответствовал каждой странице. У меня 5 разделов по горизонтали. 3 divs в середине фиксированные размеры, 200 px, 400 px и снова 200px. Теперь у меня есть один на крайнем левом и один из самых правых, который должен быть одинаково большой и заполнять экран независимо от того, какое разрешение вы просматриваете на веб-сайте. Таким образом, средняя часть должна быть посередине, а вторая divs слева и справа от средней части должны заполнять экран. Я пробовал несколько методов, объясняемых в других потоках, но большинство из них только для левой или только для правой части и не работают как слева, так и справа. Может, у кого-то есть решение?

Мой HTML

<div id="left">
test
</div>
<div id="buttonsleft">
test
</div>
<div id="middle">
test
</div>
<div id="buttonsright">
test
</div>
<div id="right">
test
</div>

Мой CSS

#left{
    float:left;
    background-color:#C00;
    width:15%;
    height:100%;
}
#buttonsleft{
    float:left;
    background-color:#3F0;
    width:200px;
    height:100%;
}
#middle{
    float:left;
    background-color:#30F;
    width:400px;    
    margin:auto;
}
#buttonsright{
    float:left;
    background-color:#3FF;
    width:200px;
    height:100%;
}
#right{
    float:left;
    background-color:#300;
    width:15%;
    height:100%;
}