Какие стили прописать для разметки страницы?

Question

[Nikolay]

Есть страница вида -

Проблема в том, что при сужении окна элементы 3 и 4 наезжают на элементы 1, 2, 5.

Что прописать, чтоб они выстраивались в вертикальный ряд.

Я пробовал:

• смещать margin
  
• clear both
  
• переносы
  
  

тогда получается исходный макет становится кривой или с большими пробелами.

Answer 1

[dm]

Чтобы правая колонка на узком экране была под левой, надо обеим отменить float с помощью медиа запросов (media queries).
Например:

@media screen and (max-width: 768px) {
	.column-left,
	.column-right {
		float: none;
	}
}

Эта запись отменяет float при разрешении экрана 768 пикселей и меньше. Колонки выстроятся одна над другой.

А в HTML в head добавить строку:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

P. S. Так тебе надо?

Comments

[Nikolay]

4 элемент всё равно наезжает на 10 px на 5 элемент. если его опускать margin то при полной ширине он становится не на одной линии с 5. что с ним сделать?

[dm]

Nikolaos: Если сделать как я выше написал, то 4-й никак не может наезжать на 5-й, потомочту между ними будет 3-й.

[Nikolay]

мне не нужен 3 между 4 и 5 т.к. . надо: 1,2,3,5,4.

[dm]

Nikolaos: 1, 2, 3, 5, 4 тоже наверняка можно сделать с помощью медиа запросов. Не видя страницу/код сложно что-то конретней советать.

[Nikolay]

Ок. смысл понятен. разберусь.