Почему слетают дивы при сжатии окна?

Question

[Филипп Гаврилов]

https://jsfiddle.net/brjhb3ew/3/

Имеется галерея с плавающей шириной - контейнер.
В ней есть дивы c margin 10px, ширина дивов задана в процентах, за вычетом отступов - 48%.

При сжатии страницы, дивы не сжимаются пропорционально контейнеру, а слетают вниз.
Если убрать margin, и назначить ширну 50% - всё нормально сжимается...

Почему так? Как сделать правильно?

Answer 1

[Павел Радьков]

Правильно использовать calc:

.project-preview {
    width: calc(50% - 20px);
    margin: 10px;
    ...
}

caniuse.com/#search=calc — поддерживается от IE9 и выше.

Comments

[Павел Радьков]

https://jsfiddle.net/brjhb3ew/4/ — исправленный фиддл

Answer 2

[semki096]

правильно сделано например в бутстрапе - смотрите разметку, там отступ в пикселях компенсируется отрицательным отступом строки. в других фреймворках - нет отступов в пикселях а только в процентах - что тоже создаёт чёткую разметку.