Почему footer по середине?

@viktor1998 · Регистрация: 08.02.2015

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

HTML5

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Отель</title>
  <link rel="stylesheet" href="/style.css">
  </head>
  <body>
  <div class="wrap">
    <nav class="cap">
     <div class="navbar-header">
      <a class="logo" href="/"></a>
      </div>
     <button type="button" class="navbar-toggle">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </button>
     <ul>
      <li><a href="/default.html">Главна</a></li>
      <li><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>
    </nav>
    <div class="container">
     <div class="content w-1">
      <div class="block s-1">
        <div class="slide">
         <ul>
           <li style="background:url('/images/1.jpg')no-repeat;background-size:cover;"></li>
           <li style="background:url('/images/2.jpg')no-repeat;background-size:cover;"></li>
           <li style="background:url('/images/3.jpg')no-repeat;background-size:cover;"></li>
         <ul>
        <div class="nav_slider">
       <span class="up"></span>
       <span class="down"></span>
      </div>
        </div>
      </div>
      <div class="block-1">
        <div class="bron">
          <div class="block-c">
            <div><p style="color:#C49F5B;font: 17px Arial,sans-serif;">Бронировани номера</p><p></p></div>
            <div><p>Дата заезда</p><input class="input" type="text"><div class="btn_1"></div></div>
            <div><p>Дата выезда</p><input class="input" type="text"><div class="btn_1"></div></div>
            <div><p></p><input value="Serch" class="btn" type="submit"></div>
          <div class="circle "> <div class="tel_1"></div></div>
      </div>
        </div>
      </div>
     </div>
     
     <div class="content w-2">
       <div class="news">
     <p style="color:#000;font-size:30px;">Новости</p>
     <ul>
 
                <li id="667">
                    <div class="one">   
                        <span class="date">— 24 января 2017, вторник</span>
                        <div class="text">Отель “Казахстан” дарит всем любящим сердцам специальное предложение на День Святого Валентина!</div>
                        <a href="" class="in"><span>Подробнее</span></a>
                    </div>
                    
                </li>
              
 
                <li id="663">
                    <div class="one">   
                        <span class="date">— 29 декабря 2016, четверг</span>
                        <div class="text">Идеально романтическое свидание в Новогоднюю ночь</div>
                        <a href="" class="in"><span>Подробнее</span></a>
                    </div>
                    
                </li>
                
                <li id="663">
                    <div class="one">   
                        <span class="date">— 29 декабря 2016, четверг</span>
                        <div class="text">Идеально романтическое свидание в Новогоднюю ночь</div>
                        <a href="" class="in"><span>Подробнее</span></a>
                    </div>
                    
                </li>
              
</ul>
    </div>
     </div>
     
    </div>
</div>
<footer class="footer">
 
   </footer>
   <script type="text/javascript" src="/js/jquery.js"></script>
   <script type="text/javascript" src="/js/script.js"></script>
  </body>
</html>

CSS

html,body{
 
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100%;
//min-height: 100%;
height: 100%;
//max-height: 100%;
     font-family: HelveticaNeueW01-45Ligh,HelveticaNeueW02-45Ligh,HelveticaNeueW10-45Ligh,Helvetica,Arial,sans-serif;
}
body{
    padding:0;
    margin:0;
    
}
 
li{
    list-style:none;
}
 
a{
    text-decoration:none;
}
 
.container,.slide,.content,.block,.slide ul, .slide ul li {
    width:100%;
    height: 100%;
    
}
 
.wrap{
min-height: 100%;
height: auto;
}
 
.cap{
    width:100%;
    min-width: 768px;
    position: relative;
    height:100px;
    border:solid 1px #f5f5f5;
    margin:0;
    top: 0px;
}
 
.cap ul{
    float:right;
    background: #C49F5B;
    height:100%;
    margin:0;
    border-radius:50px 0 0 50px;
    border:1px solid #C49F5B;;
}
 
.cap ul li{
    float:left;
    padding:15px 15px 15px 15px;
    margin-top:20px;
}
 
.cap ul li a{
    color:#fff;
}
.cap ul li a:hover,
.cap ul li a:focus{
    color:#111;
    background:#fff5f5;
    padding: 47px 0 47px 0;
    vertical-align:baseline;
}
 
.navbar-header{
    float:left;
    height:100%;
}
 
.logo{
    position:relative;
    display: block;
    height:100%;
    width:200px;
    background:url('/img/logo.jpg')no-repeat;
    background-size:contain;
    
}
 
.container{
    position: absolute;
    padding:0;
    margin:0;
    outline:0;
    vertical-align:baseline;
}
 .content{
display:block;
 
float:left;
}
 
.w-1{
    
}
.slide ul{
    margin: 0;
padding: 0;
width: 100%;
position:relative;
}
.slide > ul li{
    width: 100%;
    position:absolute;
    display:none;
}
.block{
    margin: 0;
padding: 0;
float:left;
}
 
.s-1{
    width: 80%;
}
.bron{
 
background: #154211;
height:100%;
}
.block-c{
padding: 20px 0px 0px 20px;
}
 
.block-1{
    height: 100%;
    width: 20%;
float: right;
}
 
.block-c div{
  padding:5px;
  
}
 
.circle{
border:5px solid #fff;
border-radius:50px;
 
width: 70px;
height: 70px;
 
}
 
.tel_1{
    padding:5px 5px 5px 5px;
display: block;
background: url('https://smartcall.kz/widgets/v1/images/phone-icon2.png') no-repeat center center ;
width: 48px;
background-size: 100%;
height: 54px;   
}
 
.circle:hover{
    opacity:0.9;
    cursor:pointer;
}
 
@-webkit-keyframes circle {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes circle {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
.hvr-buzz {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.circle:hover, .circle:focus, .circle:active {
  -webkit-animation-name: circle;
  animation-name: circle;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
 
 
.btn{
    background:#C49F5B;
    padding:5px 10px 5px  10px;
    font: 17px -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;
    color:#fff;
    border-radius:15px 15px 15px 15px;
}
 
.nav_slider{
    position: absolute;
width: 35px;
float:right;
right:0px;
top:0%;
}
 
.up,.down{
    height:12px;
    display:block;
}
 
 
.up{
    background:url("/img/nav.png")80% 10% no-repeat;
     margin-top: 200px;
}
 
.down{
    background:url("/img/nav.png")80% 100% no-repeat;
    margin-top: 150px;
}
 
.up,.down:hover{
    opacity:0.9;cursor: pointer
}
 
.input{
    font: 11px Arial,sans-serif;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJQAAAAWCAYAAAFRQ4WRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjJFOEVEMUIxMTgwMTFFNEIzNDU4N0Y2Mzc4NkU2NzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjJFOEVEMUMxMTgwMTFFNEIzNDU4N0Y2Mzc4NkU2NzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMkU4RUQxOTExODAxMUU0QjM0NTg3RjYzNzg2RTY3MyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyMkU4RUQxQTExODAxMUU0QjM0NTg3RjYzNzg2RTY3MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvyobIcAAADNSURBVHjaYjxy5Ej9+/fvGxioAYCG/acWYGKgIgAIIMbNmzf/p4pBIKdRwyCqeQ8ggKga6IMy8qgFBqWjAAKIaimTqo6iViof9tE36qgh7SiAAGIEFZ7W1tYMo2AIxt5oQI0G1GhAjQIoAAigQdmUGmxAUFCwYVA27wYbOHr06GjWGy2jRgNqNKBGA2o0oEYDahSMBtRoQNEWAARox45tAIBBIIiNzo8O7ECH3aRHp0jgHoUNBl85ggJBISgEBYJCUAiK3/ZSXvPGKDiQBldWCnyYSEXxAAAAAElFTkSuQmCC);
*background: url(/public-int/integration/search-form/themes/3410-kazakhstanhotel/bg-input.png?v=1406024319);
border: 0;
float: left;
width: 143px;
height: 22px;
line-height: 22px;
}
 
 
.date{
    color: #727272;
font-style: italic;
display: block;
padding-bottom: 5px;
}
 
.date-1{
    color: #fff;
font-style: italic;
display: block;
padding-bottom: 5px;
text-decoration:underline;margin:40px 10px 10px 10px;
}
 
.text{
    color: #727272;
}
 
.w-2{
   
    height: 280px;
    background: #fff;
}
 
.news{
    margin-left: auto;
margin-right: auto;
width: 90%;
}
 
.news > ul li {
float:left; 
width:30%;
 
 
}
 
.news p{
    text-align: center;
}
 
 
footer{
 
}

@mrtoxas · 02.03.2017, 14:51

Потому что, непонятно зачем у вас .container имеет абсолютное позиционирование и еще вам нужно почитать об очистке потока после float.

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	02.03.2017, 14:51	2
	Потому что, непонятно зачем у вас .container имеет абсолютное позиционирование и еще вам нужно почитать об очистке потока после float. 0

Опции темы