Ширина жидкости с равномерно расположенными DIV

У меня есть контейнер DIV с жидкой шириной.

В нем 4 DIV, все 300 x 250 пикселей ...

<div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>
   <div class="box4"> </div>
</div>

Я хочу, чтобы поле 1 перемещалось влево, поле 4 перемещалось вправо и поле 2 и 3 должны быть равномерно распределены между ними. Я хочу, чтобы интервал был плавным, и, чем меньше размер браузера, тем меньше и пространство.