Если задаю размеры, увеличивается блок и картинка идет ниже.
Это вот вообще не понятно.
Спозиционируйте ее туда, через bg position или весь блок через просто position или transform, что больше подходит. Попробуйте задавать блоку размеры ровно по размеру картинки.
А вообще либо дают ссылку либо выкладывают код в песочницу типа jsfiddle.
По скрину кажется, что количество div'ов можно сохранить.
Нету правильности.
Есть задача, есть решения. Выбор оптимального зависит от задачи.
SVG
Редактор Inkscape или любой другой поддерживающий векторную графику.
Статей про SVG хоть на русском, хоть не на русском завались.
Мне нравятся вот отсюда css.yoksel.ru/svg-fill-and-stroke
https://jsfiddle.net/btsqp55p/
Блок останется всегда 200 на 200, текст из него будет торчать, только смысл?
Можно включить прокрутку, как в примере для блока .d1.
Или скрыть лишнее с помощью overflow: hidden.
Вариантов много. Выбор зависит от желаний и того как она должна адаптироваться.
1. Верстаете, как будто закругленной рамки (только рамки) нет. Накладываете ее через ::after
2. Верстаете как 2 блока рядом, аккуратно совмещаете.
3. Мятую бумажку, полоски и рамку объединяете в фон. Сверху делаете текст и крестики.
4. Фон: бумажка + полоски градиентами. Сверху 2 блока.
Открываете инспектор кода, например, в хроме (F12) и смотрите какой класс отвечает за стрелочки и почему не применяется ваш стиль. А не применяется он, возможно, из-за специфичности.
1739, сайт у вас не работает, а что сделать я вроде сказала, даже 2 варианта. Начните делать, а потом покажите, что не выходит. Можно в песочнице jsfiddle.
Александр, вам
либо гриды,
либо флоаты и на js менять порядок в зависимости от того, выше 2 чем 1 или наоборот
либо флексы, но на js считать высоту 1+3 и 2+4 и задавать ее родителю при flex-direction row
Попробовала с columns на больших и менять на флекс на мелких. Всё было бы прекрасно, если бы можно было регулировать ширину колонок по отдельности.
Гуглить "адаптивный веб дизайн" и далее.