Мой нижний колонтитул работает в Chrome и Firefox, но не в Internet Explorer

Question

Я сделал нижний колонтитул, который отлично смотрится с Chrome и Firefox и остается в нижней части страницы, где он принадлежит. Тем не менее, он не работает с Internet Explorer. Я попробовал это с Internet Explorer 10. Как я могу это исправить?

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

Во-первых, я должен упомянуть, что после просмотра кода я понял, что мой поплавок не оставляет места внизу в Internet Explorer. Вот HTML-код:

<div id="mainfloat">
  <div class="text_body">
    <p>Text goes here.</p> 
  </div><!--text body-->
</div><!--mainfloat-->

Это CSS для основного флота:

#mainfloat{
    float: left;
    position: relative; /*also important to add*/
    background-color:#FFF;
    font-family: Arial, Helvetica, sans-serif;
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
    min-height: 550px;
    min-width: 650px; /*this was commented out earlier*/
    max-width: 900px;
    /*width: 100%;*/ /*This is what was causing my footer to go berserk!*/
    margin-left: 15%;
    margin-right: 17%;
    margin-top: 40px;
    /*margin-bottom: 30%;*/ /*Separate the main float from the footer. Experiment*/
    padding:10px;
    margin-bottom: 220px; /*makes space between float and footer*/
}

Вот HTML-код нижнего колонтитула (ссылки были заменены на "#"с целью показа кода):

<div id="footer">
    <div id="footer_wrapper"> 
        <div class="footer_font_float_left">Quick links:</div>
        <div class="column">
          <strong>#:</strong><br />
          <a href="#">#</a><br />
          <a href="#">#</a><br />
          <a href="#">#</a><br />
          <a href="#">#</a>
       </div>
      <div class="column">
         <strong>#</strong><br />
         <a href="#">#</a><br />
         <a href="#">#</a><br />
      </div>
     <div class="column">
         <strong>Web #</strong><br />
         <a href="#">#</a><br />
     </div>
     <div class="footer_font_float_bottom">Interested? <a href="#">Contact me!</a>
     </div>
  </div><!--footer_wrapper-->     
</div><!--footer-->

Это CSS:

#footer{
  min-height: 50px;
  max-height: 200px;
  min-width: 800px;
  width: 100%;
  background: black;
  bottom: 0;
  position: absolute;
  color: #FFF;
  font-family: Arial, Helvetica, sans-serif;
}

.footer_font_float_bottom > a:link{
  color: #FFFFFF;
  font-size: 11pt
}

.footer_font_float_bottom > a:visited{
  color: #FFFFFF;
  font-size: 11pt
}

.column{
  float: left;
  padding: 20px 0 0 50px; /*top, right, bottom, left TRBL*/ 
}

.column > a:link{
    color: #FFFFFF;
    font-size: 11pt;
}

.column > a:visited{
    color: #FFFFFF;
    font-size: 11pt;
}

.footer_font_float_bottom{
  bottom: 0;    
  margin-top: 120px;
}


#footer_wrapper{
    margin-left: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.blank_div{
    /*margin-bottom: 30%;*/
}

Я также включил немного CSS для тегов HTML, wrapper и body, которые помогают в нижнем колонтитуле:

#wrapper {
    min-height:100%;
    position:relative;
    width: 100%;
}

html {
   position: relative;
   min-height: 100%;
}

body {
   margin: 0 0 100px; /* bottom = footer height */
}

Можно ли просто вставить код, чтобы исправить его совместимость? Это основной поплавок, который вызывает проблему?

Любая помощь будет с благодарностью. Спасибо!