Позиционирование футера css

Question

.clearfix:after {
  content: '';
  display: table;
  width: 100%;
}

#footer {
  background: #22a2ec;
  color: #fff;
  padding: 0px 55px;
  font-weight: normal;
  height: 70px;
}

.left {
  font-size: 13px;
  float: left;
}

.right {
  font-size: 13px;
  float: left;
}

footer-menu {
  padding: 0px;
  margin: 0px;
}

.footer-item {
  float: left;
  margin-right: 60px;
  display: block;
}

.footer-item a {
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 140px;
  border: 1px solid white;
  border-radius: 5px;
  padding: 5px;
}

.back {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  color: #22a2ec;
  width: 250px;
  height: 44px;
}

<footer id="footer" class="clearfix">
  <div class="left">
    2016 / Все права защищены
  </div>
  <div class="footer-menu">
    <div class="footer-item">
      <a href="#">Контурная кнопка</a>
    </div>
    <div class="footer-item">
      <a href="#">Контурная кнопка</a>
    </div>
    <div class="footer-item">
      <div class="back">Отрывок текста на белом фоне</div>
    </div>
  </div>
  <div class="right">
    Я сверстал. Я - герой!
  </div>
</footer>

Как только не пытался позиционировать, не получалось, новичок в css. Буду благодарен, если кто поможет отцентровать правильно элементы. Изображение сверху, то что получалось. А снизу учебный макет по которому стоит делать.

Answer 1

Примерно так. Не понял, зачем Вам псевдоэлемент clearfix, убрал его, если что, сами добавите. Основная проблема была в отсутствии у родителя элементов-у Вас это #footer свойств display: flex и justify-content: space-between;. Еще-если используете технологию flex, не используйте float

#footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #22a2ec;
  color: #fff;
  padding: 0px 55px;
  font-weight: normal;
  height: 70px;
}

.left {
  font-size: 13px;
  float: left;
}

.right {
  font-size: 13px;
  float: left;
}

.footer-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  margin: 0px;
}

.footer-item {
  margin-right: 60px;
}

.footer-item a {
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 140px;
  border: 1px solid white;
  border-radius: 5px;
  padding: 5px;
}

.back {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  color: #22a2ec;
  width: 250px;
  height: 44px;
}

<footer id="footer">
  <div class="left">2016 / Все права защищены</div>
  <div class="footer-menu">
    <div class="footer-item">
      <a href="#">Контурная кнопка</a>
    </div>
    <div class="footer-item">
      <a href="#">Контурная кнопка</a>
    </div>
    <div class="footer-item">
      <div class="back">Отрывок текста на белом фоне</div>
    </div>
  </div>
  <div class="right">Я сверстал. Я - герой!</div>
</footer>

Answer 2

Summersby ответил на ваш вопрос, вы не указали у родительского элемента позиционирование. Я исправил ошибку и, как вы просили, добавил адаптива, путём добавления @media элемента, а также я прибил футер к низу страницы. Чтобы футер оставался прибитым, вы должны добавлять контент в div с классом .main.

html,
body {
  height: 100%;
}

._wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1 1 auto;
}

#footer {
  background: #22a2ec;
  color: #fff;
  padding: 0px 55px;
  font-weight: normal;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-menu {
  display: flex;
  flex-direction: row;
}
@media (min-width: 728px) {
.left,
.right {
  font-size: 12px;
  margin-right: 20px;
}
}
@media (max-width: 728px) {
.left,
.right {
  font-size: 12px;
  width: 70px;
}
}
@media (min-width: 728px) {
  .footer-item {
    margin-right: 50px;
  }
}

@media (max-width: 728px) {
  .footer-item {
    margin-right: 25px;
  }
}

.footer-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 25px;
}

@media (min-width: 728px) {
  .footer-item a {
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 140px;
    border: 1px solid #ffffff;
    border-radius: 5px;
    padding: 5px;
  }
}

@media (max-width: 728px) {
  .footer-item a {
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    width: 70px;
    border: 1px solid #ffffff;
    border-radius: 5px;
    padding: 15px;
  }
}

@media (min-width: 928px) {
  .back {
    padding: 10px;
    border-radius: 3px;
    font-size: 13px;
    background-color: #fff;
    color: #22a2ec;
  }
}

@media (max-width: 928px) {
  .back {
    padding: 10px;
    border-radius: 3px;
    font-size: 10px;
    background-color: #fff;
    color: #22a2ec;
    width: 70px;
  }
}

<div class="_wrapper">
  <div class="main"></div>
  <footer id="footer" class="clearfix">
    <div class="wrapper">
      <div class="left">2016 / Все права защищены</div>
      <div class="footer-menu">
        <div class="footer-item">
          <a href="#">Контурная кнопка</a>
        </div>
        <div class="footer-item">
          <a href="#">Контурная кнопка</a>
        </div>
        <div class="footer-item">
          <div class="back">Отрывок текста на белом фоне</div>
        </div>
      </div>
      <div class="right">Я сверстал. Я - герой!</div>
    </div>
  </footer>
</div>

БЛОГ НА HUSL

Позиционирование футера css

Ответы (2 шт):