Как запретить «натекание» элементов друг на друга при изменении размеров окна браузера?

Question

[kpa6uu]

Каким образом можно запретить "натекание" элементов друг на друга?
Например, если элемент "натекает", то он перебрасывается на новую строку, т.е. под тот элемент, на который он натекал?
Вот, набросал примерчик (на первом изображении окно браузера открыто на весь экран. На втором окно уменьшено):



Касательно этого примера нужно сделать так, чтобы элемент "1" при натекании на элемент "2" уходил вверх, а элемент "3" при натекании на элемент "2" уходил вниз.
Куда копать?

Comments

[kpa6uu]

Пример залил сюда: fastshot.ru

Answer 1

[Pavel Torbeev]

Если бы показали живой пример, было бы проще. Есть вариант использовать @media.
При разрешении экрана max-width: 768, например, делать ширину блоков, равной 100%, а не 33%

Comments

[kpa6uu]

Вот, залил fastshot.ru

[Pavel Torbeev]

У элементов абсолютное позиционирование. Что бы не происходило "натекания", добавьте код:

@media screen and (max-width: 1100px) {
    #left {float: none !important;
    margin: 20px auto !important;
    position: relative !important;
   }

[Pavel Torbeev]

Во второй строке #left, #main, #right { float: none !important;

Answer 2

[Mr Crabbz]

Ну так ясен красен - у вас используется position: absolute. При таком раскладе элементы перестают "толкаться".
Либо меняйте absolute на float'ы или flex, либо через @ media при нужном разрешении экрана меняйте позицию top, left и тд.