Set footer in the end of the site

Question

I have a problem with my footer. I know, that the problem is in float: left in style for div with light-blue borders (.card). I need to set footer in the end of the page.

Result

CSS/HTML code:

body {
  font-family: arial;
  /*меняем шрифт*/
}

.dropbtn {
  text-decoration: none;
  /*убираем подчеркивание текста ссылок*/
  border: 3px solid #30A8E6;
  color: mediumslateblue;
  /*меняем цвет ссылок*/
  background: white;
  padding: 10px;
  /*добавляем отступ*/
  border-radius: 4px;
  /*добавляем скругление*/
  -moz-transition: all 0.3s 0.01s ease;
  /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s;
  margin-top: 20px;
  margin-right: 10px;
  font-size: 18px;
}

button:hover {
  background: #1C85BB;
  /*добавляем эффект при наведении*/
  color: white;
}

#menu {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

#logo {
  width: 250px;
  height: 170px;
}

#header {
  width: 1000px;
  height: 200px;
  background: url("img/header.jpg") no-repeat;
  margin: 0 auto;
  border: 2px solid black;
  display: flex;
  align-items: center;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.sidenav {
  display: inline-block;
  width: 150px;
  position: fixed;
  z-index: 1;
  vertical-align: middle;
  left: 10px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #2196F3;
  display: block;
}

.sidenav a:hover {
  color: #064579;
  text-decoration: underline #2196F3;
}

.main {
  margin-left: 200px;
  margin-right: 250px;
  font-size: 40px;
  padding: 0px 10px;
  margin-top: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}


/*old styles*/

.footer {
  background: blue;
  height: 250px;
  position: fixed;
  /* Фиксированное положение */
  left: 0;
  bottom: 0;
  /* Левый нижний угол */
  padding: 10px;
  /* Поля вокруг текста */
  color: #fff;
  /* Цвет текста */
  width: 100%;
  /* Ширина слоя */
}

.menu-footer {
  list-style-type: none;
}

.menu-footer a {
  text-decoration: underline;
  color: white;
}


/*cards from main*/

.card {
  float: left;
  width: 300px;
  height: 300px;
  border: 2px solid cornflowerblue;
  border-radius: 5%;
  margin-right: 20px;
  margin-top: 25px;
}

.sideDrop {
  -moz-transition: all 0.3s 0.01s ease;
  /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s;
}

.img-card {
  width: 296px;
  height: 210px;
  border-radius: 5%;
}

.main-footer {
  position: absolute;
  top: 0;
  left: 0;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Авто+</title>

  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" type="text/css" href="form-style.css">
</head>

<body>

  <div id="header">
    <img id="logo" src="img/logo.png" alt="Логотип">
  </div>

  <div id="menu">
    <button class="dropbtn"><b>Главная</b></button>
    <button class="dropbtn"><b>Услуги</b></button>
    <button class="dropbtn"><b>Цены</b></button>
  </div>

  <div class="form" style="">
    <form action="" class="ui-form">
      <h3>Обратная связь</h3>
      <div class="form-row">
        <input type="text" id="phone" required autocomplete="off"><label for="phone">Номер телефона</label>
      </div>
      <p><input type="submit" value="Отправить"></p>
    </form>
  </div>

  <div class="sidenav">
    <a href="#" class="sideDrop">Категории</a>
    <div class="dropdown-content">
      <a href="#">Все</a>
      <a href="#">Легковаые</a>
      <a href="#">Грузовые</a>
      <a href="#">Мотоциклы</a>
    </div>
  </div>

  <!--Main part cards-->
  <div class="main">

    <div class="card">
      <img class="img-card" src="img/bmw1.jpg">
    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
  </div>

  <!--<div class="footer">-->
  <!--    <ul style="padding: 70px 0px 0px 70px">-->
  <!--        <li class="menu-footer">-->
  <!--            <p><a href="#">Главная</a></p>-->
  <!--        </li>-->
  <!--        <li class="menu-footer">-->
  <!--            <p><a href="#">Услуги</a></p>-->
  <!--        </li>-->
  <!--        <li class="menu-footer">-->
  <!--            <p><a href="#">Цены</a></p>-->
  <!--        </li>-->
  <!--    </ul>-->
  <!--</div>-->

  <!--footer-->
  <footer style="width: 100%; height: 50px; background: darkslategray; bottom: 0;">

  </footer>
  </div>

</body>

</html>

score 1 · Accepted Answer · answered Mar 11 '20 at 19:19

1

You can add "clear: both" to the footer css.

answered Mar 11 '20 at 19:19

mejiajuanbta

176
10

Thanks a lot, it works!)) Can you tell me what this tag does? – kAsper Mar 11 '20 at 19:30
1

the “clear: both” means floating the elements are not allowed to float on both sides. It is used when no need of any element float on the left and right side as related to the specified element and wanted the next element only shown below. – SwissCodeMen Mar 11 '20 at 19:33

Set footer in the end of the site

1 Answers1