Почему DIV width:100% шире чем родитель?

Question

[Сергей Кореневский]

Имею большой опыт в вёрстке. Сайт прежде отображался нормально, я его верстал. Но спустя время после новых версий браузера правая колонка выходит за пределы сайта.
https://explorer-office.ru/download/joomla/product...

Comments

[modelair]

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

[Сергей Кореневский]

modelair, Что по Вашему хороший дизайн? Когда всё паралаксом обтянуто.
Но я же не говорил что я хороший дизайнер, я писал что я хороший верстальщик.
Сайт был создан 10 лет назад или больше. По Вашему я тогда должен был учитывать мобильные экраны. С тех пор я просто рихтовал с очень небольшими поправками.
По идее Вы можете показать Вашу хорошую работу. Вы меня заинтриговали. Дайте ссылку.

[modelair]

Сергей Кореневский, хороший дизайн это когда все аккуратно, ничего не торчит, хорошо подобраны шрифты и цвета. и еще ряд всяческих пунктов, но это вам вряд ли нужно, вы ведь не для просвещения вопрос задали.
параллакс тоже работает в определенных кейсах и выглядит отлично.
вот на этом qna хороший дизайн.

по идее да, - могу, но не покажу. можете считать, что нечего показать.

[Сергей Кореневский]

modelair, Пожалуйста тогда Вышлите скриншот моего сайта с указанием проблемных мест. У Вас должен быть установлен скриншоттер.
Может я действительно высокого мнения о себе.

[modelair]

Сергей Кореневский,
их много. это только на одной странице, но они примерно все такие.
вам нужно придерживаться единого минимального стиля на них всех.

[modelair]

Сергей Кореневский, https://mechtavorle.ru вот тут же гораздо лучше.

[Сергей delphinpro]

modelair, не путайте дизайнера с версталой. Второму что дали, то он и сверстал.

[modelair]

Сергей delphinpro, я и не путаю. речь в комментах о дизайне

[Сергей delphinpro]

modelair, в вопросе ни слова нет о дизайне. Речь идет о верстке. Хочется потрындеть о дизайне - го на дриббл

[Сергей Кореневский]

modelair, Спасибо большое за Ваши советы. Я сохраню картинку в Задачах и буду пользоваться ей.
По поводу звёздочек, специально добавил, хотел сделать как в MS Word, где в углу малозаметный какой то узор.



А разве центрировать по центру лучше это?

[modelair]

Сергей Кореневский, центрировать надо что вертикаль, что горизонталь. слой с ценой, — текст вертикально не по центру, горизонтально тоже неровно. display: flex

[Сергей Кореневский]

modelair, Вы правы, вертикально криво выровнено. Но я не могу понять зачем горизонтально центрировать. Хотя наверно это не очень важно. Главно выровнять вертикально. Просто я прочитал Ваши заметки не увидел вертикальную кривизну и подумал что Вы говорите о горизонтальном выранвивании. Извените, не увидел.

Answer 1

[galkinhtml]

кто-то задал блоку идущему за заголовком "Примеры работ этого модуля: " - width: 800px

Answer 2

[Сергей delphinpro]

Как верно отметил galkinhtml проблема в том, что кто-то в контенте задал принудительную ширину флекс-контейнеру. Но убрать эту ширину - не решение. Кто-нибудь в будущем может снова так сделать, эта область заполняется из админки.

Колонки (ячейки) css-сетки по умолчанию имеют минимальную ширину min-width: auto и поэтому ужимаются максимум до значения min-content. Отсюда и решение, задать контентному блоку min-width: 0;. У вас это блок с классом jshop_prod_description.

Comments

[Сергей Кореневский]

Спасибо. Опыт имею большой. Но не знал что зависимость min-width: auto от ширины дочерних блоков.
Запомню на долго.

[Сергей delphinpro]

Сергей Кореневский, да, это не очевидно. Сам натыкался на подобную проблему не раз, пока разобрался в чем дело.

[Сергей Кореневский]

Сергей delphinpro, Тем более в моём случае у меня была проблема даже не в дочернем теге, а в рядом стоящем.
Т.е. проблема была в дочернем теге соседнего тега.
Да уж, шансов у меня не было догадаться.

Answer 3

[Сергей Кореневский]

2х колоночная сетка сайта имела ширину колонок
auto и 300px
Т.е. auto подстраивается под ширину контента
Если поменять auto на 1fr то проблема будет решена.