Как сделать тег footer отдельным элементом?

Question

[Nekich96]

У меня есть сайт и там у меня возникла проблема, что так называемый "подвал" внизу страницы соединён стилями с блоками товаров, а мне нужно только сам "подвал" страницы разместить по всей ширине страницы не затрагивая блоки с товарами, не подскажите как это можно сделать? Буду благодарен :)

Comments

[Вадим]

Ответ по картинке: Нужно сделать тэг footer отдельным элементом.

Код где?
А лучше демку на jsfiddle

[WapSter]

Вынести блок отдельно от блока с товарами?

[Ankhena]

1. Вытащить футер из контейнера-центровщика. Благо он последний в коде.

Варианты заметно хуже:
2. Задать ему псевдоэлемент шириной 100vw и повесить его абсолютом (не забыв задать overflow)
3. Задать самому футеру ширину 100vw и сдвинуть

[Владислав Черненко]

Ankhena, здается мне, он ни слова не поймет)

[Ankhena]

Владислав Черненко, а был бы не скрин, а код на jsfiddle.net, глядишь и ответ был бы с примерчиком.

[Nekich96]

Владислав Черненко, С чего вы это взяли? Я пока ещё только разбираюсь в оформлении стилей

[Nekich96]

Ankhena, залью конечно :)

[Ankhena]

Nekich96, тут с примерами https://sitist.ru/info-centering-blocks.htm

Answer 1

[Фархад Агамогланов]

Если ты выдал margin для body, то можешь попробовать выдать футеру:
footer{
position: absolute;
left: 0;
bottom: 0;
}
Или
footer{margin: -20px;}

Но лучше всего выдай
section{
padding-left: 20px;

Comments

[Nekich96]

Спасибо за ответ :)

[Nekich96]

<style>
.footer {
  position: relative;
  margin-top: 450px;
  height: 50px;
  background: #5D4B33; /* Цвет фона */
  text-align: center;
  color: white;
  clear:both;
  padding-top:15px;
  
} 

</style>

<footer class="footer">&copy; 2021 Все права защищены</footer>

Вот только куда код вставить? Я попытался редактировать по вашему примеру вот только у меня оно просто влево съезжает

[Фархад Агамогланов]

Nekich96, лично я пишу так:

.head_wrapper{
    width: 100%;
    height: 80px;
    display: block;
    z-index: 100;
}
.body_wrapper{
    width: 100%;
    height: 1522px;
    margin-top: 56px;
}
.body_container{
    max-width: 1920px;
    height: 100%;
    padding-left: 45px;
    padding-right: 35px;
    margin: auto;
}
.foot_wrapper{
    width: 100%;
    height: 258px;
}
.foot_container{
    max-width: 1920px;
    margin: auto;
}

возможно не совсем правильно, но всегда работает