Как сделать что бы контент не смещался

343

20 августа 2018, 05:40

Фильмы не встают друг под друга а если это сделать то слетает поисковая строка и все что за ней вот коды. Html и css.

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  font-size: 1.2em; 
  background-color: 60%; 
  color: 8px; 
} 
 
p { 
  padding: 0 0 20px 0; 
  line-height: 1.7em; 
} 
 
input[type="text"], 
input[type="password"], 
input[type="search"] { 
  color: #5d5d5d; 
  width: 60%; 
  padding: 8px; 
} 
 
input, 
textarea { 
  outline: none; 
  border: none; 
  border: solid 1px #f2f2f2; 
} 
 
input, 
textarea { 
  outline: none; 
  border: none; 
  border: solid 1px #f2f2f2; 
} 
 
h1, 
h2 { 
  font: normal 250% 'century gothic, arial'; 
  margin: 0 0 15px 0; 
  padding: 15 0 5px 0; 
  color: #000; 
} 
 
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; 
} 
 
h2 { 
  font-size: 140%; 
} 
 
.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% 'century 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 h2 { 
  font-size: 0.9em; 
  padding: 4px 0 0 0; 
  color: #999 
} 
 
.menubar { 
  width: 900px; 
  height: 46px; 
} 
 
ul.menu { 
  float: right; 
} 
 
ul.menu li {} 
 
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: 400px; 
  overflow: hidden; 
  margin: 20px auto 0 auto; 
  background-color: white; 
} 
 
.sidebar_container { 
  float: right; 
  width: 224px; 
} 
 
.sidebar { 
  float: right; 
  width: 220px; 
  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 li { 
  list-style-type: none; 
  margin: 0 0 0 0; 
} 
 
.sidebar .rating_sidebar { 
  float: right; 
} 
 
.content { 
  text-align: left; 
  width: 620px; 
  padding: 0 0 0 5px; 
  float: left; 
} 
 
.content a { 
  text-decoration: none; 
} 
 
.footer { 
  width: 100%; 
  height: 100px; 
  padding: 28px 0 5px 0; 
  text-align: center; 
  background-color: darkslateblue; 
  color: #a8aa94; 
  margin-left: 0px; 
  margin-right: 0px; 
  min-width: 900px; 
} 
 
.footer a { 
  color: #a8aa94; 
  text-decoration: none; 
} 
 
.footer a:hover { 
  color: #fff; 
  text-decoration: none; 
}

<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <meta name="description" content="КиноМания - это портал о кино"> 
  <meta name="keyworlds" 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 class="content"> 
        <p1><big><h1>Новые фильмы</h1></big></p1> 
        <div class="films_block"></div> 
        <a href="#"><img src="assets/img/matrix.png"></a> 
        <a href="#"><img src="assets/img/max.png"></a> 
        <a href="#"><img src="assets/img/inter.png"></a> 
        <a href="#"><img src="assets/img/cloud.png"></a> 
      </div> 
      <p1><big><h1>Новые фильмы</h1></big></p1> 
      <div class="films_block"></div> 
      <a href="#"><img src="assets/img/breakingbad.png"></a> 
      <a href="#"><img src="assets/img/silicon.png"></a> 
      <a href="#"><img src="assets/img/dead.png"></a> 
      <a href="#"><img src="assets/img/xfiles.png"></a> 
    </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>01.07.2018</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> 
</body> 
 
</html> 
 
<div class="footer"> 
  <p> 
    <a href="#">Главная</a> | 
    <a href="#">Фильмы</a> | 
    <a href="#">Сериалы</a> | 
    <a href="#">Рейтинг фильмов</a> | 
    <a href="#">Контакты</a> 
  </p> 
  <p> 
    wh-db.com 2018 
  </p> 
</div>

Answer 1

набросок на скорую руку.

HTML

в первую очередь надо добавить в head:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

оптимизация под мобильные устройства Viewport meta tag.

html:

    <!DOCTYPE html>
    <html lang="ru">
    <head>
    <meta charset='UTF-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <meta name="description" content="КиноМания - это портал о кино">
      <meta name="keyworlds" content="фильмы, фильмы онлайн, hd" />
    <style>
      ....
    </style>
    </head>
    <body>
      <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 class="main">
        <div class="content">
          <div class="films_block">
            <h2>Новые фильмы</h2>
            <a href="#"><img src="http://via.placeholder.com/150/fff766/fff.png"></a>
            <a href="#"><img src="http://via.placeholder.com/150/74b9f1/fff.png"></a>
            <a href="#"><img src="http://via.placeholder.com/150/6a737c/fff.png"></a>
            <a href="#"><img src="http://via.placeholder.com/150/ff99cc/fff.png"></a>
          </div>
          <div class="films_block">
            <h2>Новые фильмы</h2>
            <a href="#"><img src="http://via.placeholder.com/150/cc33ff/fff.png"></a>
            <a href="#"><img src="http://via.placeholder.com/150/66ff99/fff.png"></a>
            <a href="#"><img src="http://via.placeholder.com/150/ff0000/fff.png"></a>
            <a href="#"><img src="http://via.placeholder.com/150/a51e65/fff.png"></a>
          </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>01.07.2018</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>
      </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 2018
        </p>
      </div>
</body>
</html>

CSS:

html{
  box-sizing: border-box;
  margin: 0;
}
*,
*:before, *:after {
    box-sizing: inherit;
        margin: 0;
       padding: 0;
}
html,body{
  min-height:100vh;
}
body {
  font-size: 1.2em;
  background-color: 60%;
  color: 8px;
}
img {
  border:0;
  width:100%;
  height:auto;
  vertical-align: middle;
}
p {
  padding: 0 0 20px 0;
  line-height: 1.7em;
}
input[type="text"],
input[type="password"],
input[type="search"] {
  color: #5d5d5d;
  width: 60%;
  padding: 8px;
}
input,
textarea {
  outline: none;
  border: none;
  border: solid 1px #f2f2f2;
}
input,
textarea {
  outline: none;
  border: none;
  border: solid 1px #f2f2f2;
}
h1,
h2 {
  font: normal 250% 'century gothic, arial';
  margin: 0 0 15px 0;
  padding: 15 0 5px 0;
  color: #000;
}
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;
}
h2 {
  font-size: 140%;
}
.header {
  background-color: darkslateblue;
  height: 177px;
  font-size: 0.8em;
  margin-left: 0px;
  margin-right: 0px;
  min-width: 900px;
}
.main,
.logo,
.menubar,
.footer {
  margin-left: auto;
  margin-right: auto;
}
.logo {
  width: 880px;
  padding-bottom: 32px;
}
.logo h1,
.logo h2 {
  font: normal 300% 'century 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 h2 {
  font-size: 0.9em;
  padding: 4px 0 0 0;
  color: #999
}
.menubar {
  width: 900px;
  height: 46px;
}
ul.menu {
  list-style-type: none;
  margin:0 auto;
  line-height:46px;
  text-align:center;
}
ul.menu li {
  display:inline-block;
  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: 46px;
  padding: 13px 35px 13px 28px;
  color: #fff;
  text-decoration: none;
}
ul.menu li.selected a {
  color: #aeb002;
}
ul.menu li a:hover {
  color: #e4ec04;
}
.main {
  width: 100%;
  min-width: 900px;
  margin: 20px auto;
  text-align:center;
}
.site_content {
  display: inline-block;
  width: 100%;
  max-width:250px;
  text-align:right;
  overflow: hidden;
  margin:20px 0 0 auto;
  background-color: white;
}
.sidebar_container {
  text-align:left;
  width: 224px;
}
.sidebar {
  width: 220px;
  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 li {
  list-style-type: none;
  margin: 0;
}
.content {
  display:inline-block;
  width:calc(100% - 260px);
  text-align: left;
  padding: 0;
  margin:20px auto 0;
  vertical-align: top;
}
.content h2 {
  font-size: 140%;
  color: #136cb2;
}
.content a {
  text-decoration: none;
}
.films_block{
  padding-top: 11px;
  margin-left: 20px;
  margin-right: 20px;
}
.films_block a{
  display:inline-block;
  width:100%;
  max-width:150px;
  height:150px;
  margin:0 4px 8px;
}
.films_block img {
  max-width:100%;
}
.footer {
  width: 100%;
  height: 132px;
  padding: 28px 0 0 0;
  text-align: center;
  background-color: darkslateblue;
  color: #a8aa94;
  margin-left: 0px;
  margin-right: 0px;
  min-width: 900px;
}
.footer a {
  color: #a8aa94;
  text-decoration: none;
}
.footer a:hover {
  color: #fff;
  text-decoration: none;
}