Почему footer поднялся к header?

@Disaine · Регистрация: 08.03.2017

Author24 — интернет-сервис помощи студентам

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/read.css">
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
 
  <div class="wrapper">
 
    <div class="header">
      <div class="inner-header">
        <a href="home.html">SirexElite</a>
      </div>
    </div>
 
    <div class="container">
    <div class="clear">
      <div class="content">
        <div class="inner-content">  
 
                      <div class="manga-info">
                      <img class="manga-avatar" src="images/3.jpg" width="25%">
                        <p id="manga-name">Naruto: Shippuden</p>
                        <p>Manga name its very good</p>
                        <p>Manga name its very good</p>
                        <p>Manga name its very good</p>
                        <p>Manga name its very good</p>
                        <p>Manga name its very good</p>
                      </div>
                      <div class="manga-list">
                        <div class="manga-list"><a class="manga-list" href="">Глава нумбер 1</a></div>
                        <div class="manga-list"><a class="manga-list" href="">Глава нумбер 2</a></div>
                        <div class="manga-list"><a class="manga-list" href="">Глава нумбер 3</a></div>
                        <div class="manga-list"><a class="manga-list" href="">Глава нумбер 4</a></div>
                        <div class="manga-list"><a class="manga-list" href="">Глава нумбер 5</a></div>
                        <div class="manga-list"><a class="manga-list" href="">Глава нумбер 6</a></div>
                        <div class="manga-list"><a class="manga-list" href="">Глава нумбер 7</a></div>
                        <div class="manga-list"><a class="manga-list" href="">Глава нумбер 8</a></div>
                        <div class="manga-list"><a class="manga-list" href="">Глава нумбер 9</a></div>
                        <div class="manga-list"><a class="manga-list" href="">Глава нумбер 10</a></div>
                        
                      </div>
                    </div>
                </div>
 
    <div class="footer">
     <div class="inner-footer">
    </div>
  </div>
 
 
    </div>
 
 
</body>
</html>

CSS

.inner-content{
    width: 100%;
    float: left;
}
.content {
    margin-bottom: 5%;
    margin-left: 5%;
    margin-top: 5%;
    margin-right: 5%;
    width: 90%;
    height: 70%;
}
 
.manga-avatar {
    margin: 10px;
    margin-right: 30px;
    float: left;
}
 
.manga-info {
    color: darkblue;
    width:100%;
 
    float: left;
}
 
#manga-name {
    font-size: 60px;
}
 
.manga-list {
    color: darkblue;
    font-size: 30px;
    margin: 7px;
    text-decoration: none;
}
 
.manga-read {
    width: 50%;
    margin-left: 25%;
    margin-top: 10px;
}

CSS

*{box-sizing: border-box;
      margin:0;}
 
      .container:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
      }
 
  
      a{
        text-decoration: none;
        color: #EFEDF8;  
      }
 
      a:hover {
        cursor: default;
        text-decoration: none;
        color:#EFEDF8;
    }
 
      .container {
        display: inline-block;
        float: left;
      }
      html, body {
       font-family: Comic Sans MS;
       height: 100%;
     }
 
 /*<----------------------------------------------------------------------->*/
 /*<----------------------------------------------------------------------->*/
 /*<----------------------------------------------------------------------->*/
 /*<----------------------------------------------------------------------->*/
 /*<----------------------------------------------------------------------->*/
 /*<----------------------------------------------------------------------->*/
 
     body {
      background-color: #f4f4f4;
      font-size: 24px;
      color: black;
    }
    .container {
      margin-top: 30px;
      min-height: 100%;
      height: auto !important;
      width:100%;
    }
 
    .header {
      margin-bottom: 10px solid silver;
    }
    .inner-header{
      height: 50px;
      background-color: #333;
      color: #EFEDF8;
      font-size: 160%;
    }
 
    .content {
      float: left;
      width: 100%;
      padding-bottom: 50px;
    }
    .inner-content{
      background-color: #BDF2FA;
    }
 
    .footer{
      margin-top: 30px;
      margin: -100px auto 0;
      position: relative;
      height: 50px; 
      margin-top: -50px;
      display: block;
      width: 100%;
    }
 
    .inner-footer{
      height: 50px;
      background-color: #333;
      color: #EFEDF8;
      font-size: 150%;
    }
    .clear:after{
      content: " ";
      display: table;
      clear: both;

@mrtoxas · 09.03.2017, 18:50

Вам надо более внимательней почитать про обтекание(float) и очистку потока(clearfix). А еще, анализировать те ответы, которые вы получаете на форуме. У вас уже второй или третий код с одной и той же проблемой, причем, решение проблемы вам уже подсказали.

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	09.03.2017, 18:50	2
	Вам надо более внимательней почитать про обтекание(float) и очистку потока(clearfix). А еще, анализировать те ответы, которые вы получаете на форуме. У вас уже второй или третий код с одной и той же проблемой, причем, решение проблемы вам уже подсказали. 0

Опции темы