Как правильно сверстать footer?

Question

[Waniman]

На первом скрине - то, что получилось у меня) А на втором как должно быть.
У меня правая часть футера к низу приклеелась, как это убрать?
Там справа должен быть блок с виджетами, как на втором скрине. Как такое реализовать?)

Вот мой код:

<footer>
        <div class="footer-top">
            <div class="footer-left">
            <div class="company">
                <h2>О компании</h2>
                <ul>
                   <a href="#"> <li>О компании</li></a>
                   <a href="#"> <li>Новости</li></a >
                   <a href="#"><li>Вакансии</li></a >
                   <a href="#">  <li>Отзывы</li></a >
                </ul>
            </div>
            <div class="abonents">
                <h2>Абонентам</h2>
                <ul>
                   <a href="#"> <li>Тарифы</li></a>
                   <a href="#"> <li>Акции</li></a >
                   <a href="#"><li>Публичный договор</li></a >
                   <a href="#">  <li>Способы оплаты</li></a >
                </ul>
            </div>
            <div class="support">
                <h2>Поддержка</h2>
                <ul>
                   <a href="#"> <li>Контакты</li></a>
                   <a href="#"> <li>Помощь</li></a >
                   <a href="#"><li>Услуги</li></a >
                   <a href="#">  <li>Покрытие</li></a >
                </ul>
            </div>
            <div class="tech-support">
                <h2>Техподдержка</h2>
                <ul>
                    <li>номер</li></a>
                    <li>номер</li></a >
                    <li>номер</li></a >
                    <li>номер</li></a >
                    <li>номер</li></a >
                </ul>
            </div>
        </div>
            <div class="footer-right">
                <h3 class="subscr">Подписывайтесь на нас в соцсетях</h3>
            </div>
        </div>
</footer>

footer {
  height: 300px;
}

.footer-top {
  background-color: #053a6a;
  height: 262px;
}
.company,
.abonents,
.support,
.tech-support {
  margin: 30px 0 82px 72px;
  float: left;
}
.company ul li,
.abonents ul li,
.support ul li,
.tech-support ul li {
  margin-bottom: 7px;
}
.company h2,
.abonents h2,
.support h2 {
  padding-top: 30px;
  margin-bottom: 10px;
  margin-left: -20px;
  color: #ffffff;
}
.tech-support {
  width: 261px;
}
.tech-support h2 {
  padding-top: 30px;
  margin-bottom: 10px;
  color: #ffffff;
}
.company a,
.abonents a,
.support a,
.tech-support a {
  text-decoration: none;
  color: #ffffff;
}

.tech-support ul li {
  text-decoration: none;
  list-style-type: none;
  color: #ffffff;
}
.tech-support ul a {
  text-decoration: none;
}
.footer-left {
  height: 100%;
  display: inline-block;
  background-color: #09579f;
}
.footer-right {
  display: inline-block;
}
.subscr {
  display: inline-block;
}
.footer-bottom p {
  width: 200px;
  padding: 10px;
  margin: 0 auto;
}

Comments

[g33km]

Очень мудрено сделано, намного более компактнее и правильнее будет сверстать с применением flex.

Если так нужно закончить именно такой вариант реализации, то

1. У .footer убрать высоту
   
2. Для .subscr убрать display: inline-block
   
3. Для .footer-right:
   

   .footer-right {
     display: inline-block;
     vertical-align: top;
     height: 100%;
   }

   
   
   

В HTML много ошибок, например, неправильный синтаксис у закрывающих тегов a (стоит непонятный пробел после самой буквы и перед >), в списках ссылки идут не внутри , а являются дочерними элементами ul, и так далее. В CSS много лишнего кода, и в принципе само решение слишком уж тяжелое и не особо правильное. Углубитесь в изучение Flexbox CSS и сверстать это будет гораздо проще, правильнее и быстрее.

[FinGanapre]

Телефоны не забудьте кликабельными сделать. Там у вас недописано немного. пиксели использовать не нужно, если это будет адаптив. Есть %, rem и em для этих целей. На float-ах сейчас уже не верстают. Страшного в этом ничего нет, можно использовать, но вам самим будет не очень удобно. Посмотрите в сторону flex-box. Избегайте вложенных селекторов, есть прекрасный БЭМ. Для цветов и других повторяющихся, зависимых от чего-то величин, поддающихся какой-то общей логике лучше использовать css переменные. Почитайте "css для профи". Это книга, не помню автора.

<!-- Вот тут -->
<ul>
  <li>номер</li></a>
  <li>номер</li></a >
  <li>номер</li></a >
  <li>номер</li></a >
  <li>номер</li></a >
</ul>

<!-- Должно быть так -->
<ul>
  <li><a href="tel:[phone]">[phone]</a></li>
  <li><a href="tel:[phone]">[phone]</a></li>
</ul>



<!-- А вот тут -->
<ul>
  <a href="#"> <li>О компании</li></a>
  <a href="#"> <li>Новости</li></a >
  <a href="#"><li>Вакансии</li></a >
  <a href="#">  <li>Отзывы</li></a >
</ul>

<!-- Так -->
<ul>
  <li><a href="#">О компании</a></li>
  <!-- ... -->
</ul>

[Ankhena]

Waniman,
1. Обязательно проверяйте свой код валидатором https://validator.w3.org/nu/
Нарушать можно, только если вы очень хорошо понимаете что именно и зачем делаете.

Дочерними элементами теги ul могут быть только li.
А ссылки уже внутри li.

2. Верстка флоатами уже давно не используется.
В современном мире флоаты используются исключительно по назначению.

А для верстки используют flex и grid.

В вашем случае достаточно flex'а, но и grid пойдет.

Почитайте
https://html5book.ru/css3-flexbox/
https://tproger.ru/translations/how-css-flexbox-works/
для лучшего понимания и закрепления есть прекрасная мини-игра https://flexboxfroggy.com/#ru

Обязательно обратите внимание на свойства flex-grow и flex-shrink.

3. Для фона обертки футера, если он растягивается на всю ширину окна, а контентный блок имеет фиксированную
или процентную ширину можно использовать такой прием с градиентом https://jsfiddle.net/k10h26nc/

4.
FinGanapre,

. пиксели использовать не нужно, если это будет адаптив.

Пиксели можно использовать, даже если это адаптив.

[FinGanapre]

Можно, просто зачем? Удобнее прыгать от rem единиц в отступах. Пиксели только на max-width у меня остаются и в :root для font-size. В некоторых случаях в местах где нужен фиксированный размер либо изменяющийся только в медиа запросах.

Согласен, что в моей формулировке "не нужно" не хватает слова "почти". А "не нужно" лучше заменить на "нет необходимости" Так будет ближе к тому, что я имел в виду:)

Answer 1

[Aleksander911]

Возьми принцип бутстрапа и создай свой

<footer>
<div class="container">
<div class="row">
<div class="col-3">
текст
</div>
<div class="col-3">
текст
</div>
<div class="col-3">
текст
</div>

css

.container {
  width: 90%;
  max-width: 1200px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.col-3 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}