0

* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 1.2em;
  background-color: #fff;
  color: #555;
}

p {
  padding: 0 0 20px 0;
  line-height: 1.7em;
}

input[type="text"],
iput[type="password"],
input[type="search"] {
  color: #5d5d5d;
  width: 60%;
  padding: 8px;
}

input,
textarea {
  outline: none;
  border: none;
  border: solid 1px #f2f2f2;
}

h1,
h2 {
  font: normal 170% 'century gothic', arial;
  margin: 0 0 15px 0;
  padding: 15px 0 5px 0;
  color: #000;
}

h2 {
  font-size: 140%;
}

a,
a:hover {
  outline: none;
  text-decoration: underline;
  color: #aeb002;
}

ul {
  margin: 2px 0 22px 17px;
}

ul li {
  margin: 0 0 6px 0;
  padding: 0 0 4px 5px;
  line-height: 1.5em;
}

.header {
  background-color: darkslateblue;
  height: 177px;
  font-size: 0.8em;
  margin-left: 0px;
  margin-right: 0px;
  min-width: 900px;
}

.main,
.logo,
.menubar,
.site_content,
.footer {
  margin-left: auto;
  margin-right: auto;
}

.logo {
  width: 880px;
  padding-bottom: 40px;
}

.logo h1,
.logo h2 {
  font: normal 300% 'centure gothic', arial, sans-serif;
  margin: 0 0 0 9px;
}

.logo_text h1,
.logo_text h1 a,
.logo_text h1 a:hover {
  padding: 22px 0 0 0;
  color: #fff;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.logo_text h2 {
  font-size: 0.9em;
  padding: 4px 0 0 0;
  color: #999;
}

.menubar {
  width: 900px;
  height: 46px;
}

ul.menu {
  float: right;
}

ul.menu li {
  float: left;
  padding: 0 0 0 9px;
  list-style: none;
  margin: 1px 2px 0 0;
}

ul.menu li a {
  font: normal 100% 'trebuchet ms', sans-serif;
  display: block;
  height: 20px;
  padding: 6px 35px 5px 28px;
  color: #fff;
  text-decoration: none;
}

ul.menu li.selected a {
  color: #aeb002;
}

ul.menu li a:hover {
  color: #e4ec04;
}

.site_content {
  width: 880px;
  overflow: hidden;
  margin: 20px auto 0 auto;
  background-color: white;
}

.sidebar_container {
  float: right;
  width: 224px;
}

.sidebar {
  float: right;
  width: 222px;
  padding: 5%;
  margin: 0 0 16px 0;
  border: solid 1px #f2f2f2;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.btn {
  padding: 8px;
  background-color: white;
  cursor: pointer;
}

.sidebar h2 {
  color: #136cb2;
}

.lables_passreg_text {
  font-size: 0.7em;
  margin-top: 3%;
  margin-left: 2%;
}

.sidebar ul {
  margin: 0;
}

.sidebar ul li {
  list-style-type: none;
  margin: 0 0 0 0;
}

.sidebar .rating_sidebar {
  float: right;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Главная страница</title>
  <meta name="description" content="Киномостр - это портал о кино" />
  <meta name="keywords" content="фильмы,фильмы онлайн, hd" />
  <link rel="stylesheet" href="assets/css/style.css" />
</head>

<body>

  <div class="main">

    <div class="header">
      <div class="logo">
        <div class="logo_text">
          <h1><a href="/">КиноМонстр</a></h1>
          <h2>Кино - наша страсть!</h2>
        </div>
      </div>
      <div class="menubar">
        <ul class="menu">
          <li class="selected"><a href="#">Главная</a></li>
          <li><a href="#">Фильмы</a></li>
          <li><a href="#">Сериалы</a></li>
          <li><a href="#">Рейтинг фильмов</a></li>
          <li><a href="#">Контакты</a></li>
        </ul>

      </div>
    </div>
  </div>
  <div class="site_content">
    <div class="sidebar_container">
      <div class="sidebar">
        <h2>Поиск</h2>
        <form method="post" action="#" id="search_form">
          <input type="search" name="search_field" placeholder="ваш запрос" />
          <input type="submit" class="btn" value="найти" />
        </form>
      </div>
      <div class="sidebar">
        <h2>Вход</h2>
        <form method="post" action="#" id="login">

          <input type="text" name="login_field" placeholder="логин" />
          <input type="password" name="password_field" placeholder="пароль" />
          <input type="submit" class="btn" value="вход" />
          <div class="lables_passreg_text">
            <span><a href="#">забыли пароль?</a></span> |
            <span><a href="#">рагистрация</a></span>
          </div>
        </form>
      </div>
      <div class="sidebar">
        <h2>Новости</h2>
        <span>21.04.2020</span>
        <p>Мы запустили расширенный поиск</p>
        <a href="#">читать</a>
      </div>
      <div class="sidebar">
        <h2>Рейтинг фильмов </h2>
        <ul>
          <li><a href="#">Интерстелар</a><span class="rating_sidebar">8.1</span></li>
          <li><a href="#">Матрица</a><span class="rating_sidebar">8.0</span></li>
          <li><a href="#">Безумный Макс</a><span class="rating_sidebar">7.5</span></li>
          <li><a href="#">Облачный атлас</a><span class="rating_sidebar">7.4</span></li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <p>
        <a href="#">Главная</a> |
        <a href="#">Фильмы</a> |
        <a href="#">Сериалы</a> |
        <a href="#">Рейтинг фильмов</a> |
        <a href="#">Контакты</a> |

      </p>
      <p>wh-db.com 2015</p>
    </div>
  </div>
</body>

</html>

3

1 ответ 1

0

Отличная статья по Вашему вопросу написана здесь: https://learn.javascript.ru/float

Лучшим решением в Вашем случае мне думается будет написать перед footer еще один div:

<div style="clear: both;"></div>
<div class="footer">

Конечно работает и просто добавление clear: both в класс footer, но при этом если Вам захочется поставить margin-top: 200px у footer - то это не будет работать (см. статью)

1
  • Спасибо огромное! 22 апр 2020 в 17:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.