Моя первая вёрстка макета. Как запретить блокам наезжать друг на друга?

Question

[Гаджи]

https://jsfiddle.net/Gadzhi/ypwsnk0x/
Какое поведение должно быть у блоков, когда сужаешь окно браузера? Я пытался сделать какой то отступ между блоками, чтоб блоки не налазили друг на друга, и, чтоб строки переносились на другую строку, но отступы и поля игнорируются. Например так

.list {
  display: inline-block;
  margin-right: 20px;
}

Ещё есть загадочный отступ в 2px слева, который я никак не могу убрать. По макету расстояние от края до края 1180, у меня выходит 1178.

spoiler

. Я подключал нормалайз и ресет, но это ничего не дало.

spoiler

Этот хэдер я верстаю уже сутки. Интересно. Сам сперва стараюсь решить проблему, гуглю. Есть даже 2 чат-канала по вёрстке, сперва там спросил, но никто не дал ответа.

Comments

[Алексей Орлов]

Предоставьте код на codepen или ссылку на сайт.

[Анатолий]

пример на jsfiddle, пожалуйста

[Гаджи]

Алексей Орлов, Анатолий, вставил. из за пустого "a href" не было видно

[Анатолий]

Гаджи,

.wrap {
	padding-top: 50px;
	padding-bottom: 43px;
	/* position: relative; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.img {
/* 	display: inline-block;
	position: absolute;
	right: 0;
	 */
   }

[Гаджи]

Анатолий, А без флексов можно? Мне говорили, что лучше научится на инлайн блоках, потом флексы, гриды.

[Николай Смирнов]

Гаджи, так без флексов.

.wrap {
	padding-top: 50px;
	padding-bottom: 43px;
}
.wrap::after {
  display: table;
  content: '';
  clear: both;
}
.list {
  float: left;
  width: 40%;
  margin-right: 2%;
}
.img {
  float: left;
  width: 58%;
}

Если нужно, чтобы блоки располагались слева направо, то используем float: left. Ширину и отступы задаем в процентах, чтобы элементы могли растягиваться и легче было просчитать размеры всех боков. Если ширина первого блока - X% и margin-right - Y%, то ширина оставшегося блока будет: 100% - X% - Y%. В конце добавляем clearfix, чтобы родитель - .wrap получил высоту по содержимому.

[Ankhena]

Николай Смирнов, ему говорили на инлайн-блоках, а не на флоатах. А то еще таблицы припашете сюда.
Гаджи, без флексов сейчас совсем никуда. Как работают инлайн-блоки и зачем нужны флоаты, конечно, обязательно нужно знать, но сетки (сейчас) надо разумно на флексах.

[Гаджи]

Ankhena, конечно, просто если возьмут в офис или на заказе скажут поработать с инлайн-блоками, а я кроме флексов (и возможно гридов) ничего больше не знаю. Может я не правильно всё себе представляю.

[Ankhena]

Гаджи, приоритеты обдумайте

Answer 1

[Алексей]

Картинка у вас налезает из за position: absolute. Для каких целей оно добавлено?

Comments

[Гаджи]

Уже не помню точно. Я его методом тыка сувал в разные блоки. Весь контент хотел обернуть в wrap чтоб за раз всем снизу отступ сделать "padding-bottom: 43px;"

[Алексей]

Гаджи, position absolute тут совершенно не к месту

[Гаджи]

Алексей, а как его прижать к правому краю?

[Алексей]

Гаджи, Изучите флексы, все вопросы отпадут сами собой. Сейчас без них никуда

[Гаджи]

Алексей, А без флексов можно? Мне говорили, что лучше научится на инлайн блоках, потом флексы, гриды.

[Гаджи]

Гаджи, Не мне говорили, а где то прочитал

[Алексей]

Гаджи, инлайн блоки для сетки это как идти на танк с ножом. Флексы в разы функциональнее и используются сейчас везде. С инлан блоками успеете разобраться, они не так часто нужны

[Гаджи]

Алексей, Спасибо, попробую.