Div не перемещаются при изменении размера окна

Я хочу переместить div при изменении размера окна. У меня есть три div внутри одного div (т.е. контейнера)

Eg:

      <div id="container">
          <div class="left"></div>
          <div class="middle"></div>
          <div class="right"></div>
        </div>

Он выровнен правильно. Но я хочу, чтобы эти div перемещались (но они не должны перекрываться, я имею в виду, что они должны останавливаться до того, как они перекрываются), когда я изменяю размер окна.

This is how my CSS looks.
#container {
    text-align:center;
    width : 100%;
}

.left {
    float:left;
}

.center {
    display: inline-block;
    margin:0 auto;
}

.right {
    float:right;
}

Спасибо за помощь!

Цитата