как заставить блок div перескакивать в центр?

Имеется 3-х колоночная резиновая верстка, при маштабировании правый блок смещается вниз-вправо, необходимо чтобы он сезжал вниз и располагался по центру

кусок кода:

html:

<div id="text">
<div id="left-top" class="top"><img src="img/img3.png" class="img">
<h3>текст</h3>
<p class="align"> текст</p>
</div>
<div id="center" class="top"><img src="img/img2.png" class="img">
<h3>текст</h3>
<p class="align">текст</p>
</div>
<div id="right-top" class="top"><img src="img/img1.png" class="img">
<h3>текст</h3>
<p class="align">текст</p>
</div>
</div>

css:

.top{
float:left;
margin-top: 55px;
margin-bottom: 35px;
width:33.3%;
min-width:210px;
box-sizing:border-box;
padding:0 15px;
outline:solid;
}

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.