CSS Footer автоматически не движется вниз

Question

У меня есть этот CSS код для моего сайта:

@charset "UTF-8"; 
/* CSS Document */ 

* { 
    margin:0; 
    padding:0; 
} 

html, body, #wrap { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
    font-family:Calibri; 
} 
#wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -580px; /* the bottom margin is the negative value of the footer's height */ 
    border:4px solid #000000; 
} 

.push { 
    height: 580px; /* .push must be the same height as .footer */ 
} 

/* header stuff */ 
#header-topbar { 
    width:100%; 
    height:40px; 
    /* padding:10px 10px 10px 10px; */ 
    background-color:#666666; 
} 
#header-topbar2 { 
    width:100%; 
    height:100px; 
    /* padding:10px 10px 10px 10px; */ 
    background-color:#eeeeee; 
} 
#phone-tel { 
    float:right; 
    margin-right:16%; 
    margin-top:5px; 
    font-size:20px; 
} 
#logo { 
    position:absolute; 
    float:left; 
    margin-left:15%; 
    margin-top:15px; 
} 

/* main body/content */ 
#body-content { 
    padding-bottom:200px; 
    width:80%; 
    margin:120px auto 0 auto; 
    padding:10px 10px 10px 10px; 
    border:solid 1px #a79494; 
    border-top:solid 4px #a2cd3a; 
} 

/* homepage-boxes */ 
#homepagebox { 
    width:80%; 
    margin:0 auto 0 auto; 
} 
#homepagebox .column { 
    float: left; 
    width: 25%; 
} 
#homepagebox .column div { 
    margin: 5px; 
    min-height: 350px; 
    background: #eeeeee; 
} 

/* FOOTER */ 
#footer { 
    width:100%; 
    height:580px; 
    border-top:4px solid #666666; 
    background-color:#eeeeee; 
} 
#footer-inner { 
    width:80%; 
    margin:0 auto 0 auto; 
    height:inherit; 
} 
#footerTop { 
    width:100%; 
    height:480px; 
    padding-top:10px; 
    border-bottom:2px #000000 solid; 
} 
#footerTopLeft { 
    width:30%; 
    height:420px; 
    float:left; 
    display:inline; 
    margin-top:10px; 
    padding:0 15px 10px 15px; 
    border-right:1px solid #000000; 
} 
#footerTopMid { 
    width:30%; 
    height:420px; 
    float:left; 
    display:inline; 
    margin-top:10px; 
    padding:0 15px 10px 15px; 
    border-right:1px solid #000000; 
} 
#footerTopRight { 
    width:30%; 
    height:420px; 
    float:left; 
    display:inline; 
    padding:0 15px 10px 15px; 
} 

#enquiryForm     { clear:both; padding:8px 40px 0 0; } 
.enquiryField     { clear:both; padding:5px 0; } 
.enquiryField label    { clear:none; float:left; } 
.enquiryField input    { clear:none; font-family:Calibri; float:right; padding:3px; width:189px; } 
.enquiryField textarea   { clear:none; float:right; font-family:Calibri; padding:5px; width:189px; } 

.enquiryError     { clear:both; color:#fff; font-family:Calibri; } 
#enquirySent     { color:#fff; font-family:Calibri; } 

в колонтитул отображается в нижней части страницы, но если основное содержание страницы слишком долго сноска не двигается вниз на всех , содержимое просто отображается над нижним колонтитулом.

, например, в моем HTML У меня есть 4 дивы выровненные рядом друг с другом, и они показывают по сноске

я создал скрипку здесь: http://jsfiddle.net/rwqjH/1/

Answer 1

Вы должны очистить плавающие элементы, добавьте строку ниже, прежде чем <div class="push"></div>

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

Demo

Примечания: Я не фиксирован футер выравнивания, они довольно перепутались вверх, Я бы посоветовал вам изучить CSS-позиционирование

Answer 2

попробуйте добавить overflow:auto; к #wrap. Когда вы плаваете элементы, они удаляются из макета, а #wrap больше не изменяет размер по умолчанию.