Как правильно задавать параметры для div, что бы контент был всегда посередине?

Question

[Матвей Томилов]

Всем доброй ночи!
Поскольку я верстальщик самоучка, мне никто не обьяснил, как правильно и красиво сделать так, что бы контент сайта был посередине страницы , а все сайты, что я переверстывал были составлены просто ужасно, с одной стороны отступ в % с другой в пикселях, то маргины, то паддинги.

Самому в голову приходит только такая идея:
Допустим я делаю header 1200px, задаю ему margin: 0 auto; width :1200px;
Внутри него более менее прилично, когда я уменьшаю размер страницы до 1200px включительно, все супер, просто уменьшаются отступы с краев, сам блок меньше не становится.

Но когда я делаю див под headerом, допустим со слайдером, оказывается, что хедер у меня в высоту 0px, и слайдер закрывает его своим бэкграундом, хотя сам на него не заезжает.

Что я делаю не так? Как вы верстаете сайты, которые имеют ВСЕГДА одинаковые отступы по краям? И что бы потом было удобно делать адаптиву.

И как в такой верстке смотрится бутстрап? Подходит ли он для серьезных проектов? Или что бы получить по настоящему хороший сайт, лучше его избегать?

Comments

[Андрей]

если вы выложите пример на https://jsfiddle.net/ вас будет легче понять

Answer 1

[Гарес Антонович]

Используйте только сетки от бутстрапа, потом сделаете свой фреймворк!

В больших проектах, такие вопросы не возникают:)

Как вариант есть еще другие.
Foundation, Skeleton и тд.

Если вы хотите быстро верстать и вам не нравяться такие фреймворки, скачайте 4 приведенных выше (бутстрапа 3 и 4) посмотрите как устроено и сделайте свой.

Но по началу не забивайте голову, с таким успехом можна задаваться вопросом а стоит ли использовать библиотеки?:)

Comments

[Матвей Томилов]

Но как тогда задать статичную ширину контента 1200px и что бы он был по центру? Ведь использование сеток блокирует margin: 0 auto;

[Гарес Антонович]

etozhematvekat: Если у вас есть задача в каком то месте сделать именно фиксировано 1200 пикселей то вы запросто можете это сделать не вызывая стили сетки в этом месте, и вам ничего не помешает
Если я правильно вас понял

Готовая сетка просто экономит вам время, и опять же если вы считаете что это вам не нужно и никак не поможет то просто возьмите посмотрите что в сетках есть хорошего для вас и сделайте свою, залейте на гитхаб и соберите своё комьюнити, возможно вы нашли какой то не закрытый пробел среди css grid систем

etozhematvekat: но если рассматривать задачу "хочу ширину 1200 пикселей" то это уже прямой костыль в создании адаптивки вашего сайта, в таком случае лучше использовать

#block{
width:100%;
max-width:1200px;
min-width:320px;  /* опционально */
margin: 0 auto;
}

Такие условия помогут вам вне зависимости от размера экрана сделать выравнивание блока по центру, если вы уж так сильно не хотите прибегать к использованию сеток

[Гарес Антонович]

etozhematvekat: Но я все же настоятельно рекомендую вам использовать readymade css grid - так как это банально экономия вашего времени на старте

Answer 2

[Александр Алексеев]

наверное внутри хедера у вас блоки с float left
тогда к хедеру необходимо прилепить так называемый clearfix
2 способа

1) после float блоков добавить пустой div c clear: both
2) к хедеру добавить класс clearfix и стили к нему

.clearfix:before, .clearfix:after {  content: " ";  display: table;}
.clearfix:after { clear: both;}

тогда блок с float-ами внутри станет нормальной высоты

Answer 3

[Денис Киселев]

Для таких целей используй Flexbox