Как прижать footer к низу страницы

<!-- Шапка --> <!-- /-- Правая панель ссылок --/ -->

html { margin:0px padding:0px height:100% }
body { width: 100% height: 100% color:#333 background: #fff font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif font-size:0.94em line-height:135% margin-top:0px margin-left:0px margin-right:0px }
#container{ margin-top:0px margin-left:0px margin-right:0px height: 100% }
#header{ width:100% height:57px background:#0dbfe5
} .container{ margin-left:40px min-height:100% }
ul{ list-style:none }
a{ text-decoration:none
} a:hover{ text-align:center background: #fff }
li{ display:inline-block }
#main-navigation, #main-navigation li{ margin:0 padding: 0
}
#main-navigation{ background:#0dbfe5
}
#main-navigation ul{ overflow:hidden
} #main-navigation li{ float:left text-align: center } #main-navigation a{ border-left:1px solid #adadad display:block color:#d7d4d4 text-decoration:none padding:19px 20px 18px 20px }
.net-block{
}
.wrapper{ width:1200px margin-right:40px min-height:100% }
.logo{ width:141px height:47px margin-top:33px margin-bottom:42px margin-left:40px }
.bottom_menu{ margin-left:40px width:1200px height:70px left:0px bottom:0px display:inline-block }
#dropdown_nav, #dropdown_nav li{ margin:0 padding:0 font-weight:bold display:inline-block list-style:none border-bottom:0px solid #777 margin-top:18px
}
#dropdown_nav{ background:#323232 width:1200px } #dropdown_nav li{ display:inline-block float:left position:relative }
#dropdown_nav a{ display:block color:#fff text-decoration:none padding:5px 22px 20px 22px font-weight:100 font-size:18px /*background: url(images/linemenu.png) right no-repeat */ }
#dropdown_nav li a:hover { background: #000 text-decoration:none color:#0dbfe5 }
#dropdown_nav li:hover>.sub-menu{ display:block }
#dropdown_nav .sub-menu{ z-index: 4 width:150px padding:0px position:absolute top:42px left:0px border:0px solid #ddd border-top:none background: #000 display:none
}
#dropdown_nav .sub-menu li{ width:150px padding:0px
}
#dropdown_nav .sub-menu li a { background: none font-weight: normal font-size:15px display:block border-bottom:0px solid #e5e0b3 padding-left:10px color:#fff
}
#dropdown_nav .sub-menu li a:hover { background:#222 color:#0dbfe5 text-align:left }
.content{ width:1200px height:103px background:#eeeeee margin-left:40px margin-top:-10px text-align:center }
h2{ text-align:center padding-top:40px }
.middle{ width:1200px height:46px background:#fff border:0px solid #e5e0b3 margin-left:40px }
.postbox{ border:0px solid #333 background: #fff width:700px margin-top:0px margin-left:40px margin-bottom:50px float:left }
.postbox h3 a{ font-family: "Segoe UI Semilight", "Segoe UI", Tahoma, Helvetica, Sans-Serif color:#000 font-style:normal font-weight:100 font-size:33px }
.postbox h3 a:hover{ color:#0dbfe5 }
.postbox info{ margin-bottom:17px margin-top:20px color:#999 font-weight:100 font-size:14px }
.postbox info a{ color:#777 }
.postbox info a:hover{ color:#4991bb }
.postbox text{ border:0px solid #333 width:700px margin-bottom:30px }
.postbox text p{ margin-top:0 }
.bottom-next a{ background:#0dbfe5 color: #fff font-size: 17px width: 100px border-radius: 3px text-align:center padding:6px 25px 9px 25px }
.bottom-next a:hover{ background:#000 color:#0dbfe5 }
.raz{ margin:0 auto border:0px solid #333 background: #fff width:116px height:29px margin-bottom:20px }
#colRight{ float:right width:350px height:100% position:relative margin-left:70px margin-top:0px margin-right:20px }
#form-query {
background:#eeeeee border:0px solid #e4e4e4 width:350px height:31px padding:8px 10px 7px font-weight:100 font-size:18px color:#000 margin-bottom: 20px margin-top:0px
}
#form-querysub { position:absolute right:7px top:7px width:17px height:17px background:#d7d7d7 border:0px dashed #333 }
#form-querysub:hover { cursor: pointer }
.rightBox h3{ background:#d7d7d7 border:1px solid #e1e3e3 padding:10px margin-bottom:0px }
.rightBox{ margin-left:0px margin-top:0px margin-bottom:0px
}
.rightBox li{ background:#fff border-top:1px solid #e1e3e3 padding:10px 0px

}
.rightBox ul{ background:#fff border-top:0px solid #e1e3e3 padding:10px 0px }
.rightBox li:first-child { border-top:none }
.rightBox a { color:#333 }
.rightBox a:hover { color:#0dbfe5 }
.clear { clear: both
}
#footer { margin-top:50px height:100px width:100% background: #0dbfe5 }
.footerInner { position:relative border:0px solid #000 width:1200px margin:-50px height:100px }
Footer находится посередине страницы и никуда не двигается. Подскажите, пожалуйста, в чем проблема?

Ответ
Если вы хотите сделать так, чтобы подвал (footer) был всегда внизу окна браузера при том, что на странице недостаточно контента, то можете использовать такой код:


html,
body {
height: 100%
}
#wrap {
min-height: 100%
}
main {
padding-bottom: 100px
/*Высота футера*/
}
footer {
margin-top: -100px
/*Минус Высота футера*/
height: 100px
/*Высота футера*/
}

Содержимое подвала

Такая разметка предполагает, что все содержимое страницы хранится внутри блока div с id = wrap, а все содержимое футера в блоке footer. Блок header здесь необязателен (предполагается, что в нем хранится шапка страницы, например, меню). Блок main обязателен.
Также вы можете заменить footer, main, #wrap на блоки div или другие элементы, но потребуется поправить стиль.
Если вас устраивает main, #wrap, footerr, имейте в виду, что в браузере IE < 9 потребуется подключить скрипт html5shiv, поскольку старые IE не понимают теги html5