My footer works in Chrome and Firefox, but not Internet Explorer

Question

I made a footer That looks great with Chrome and Firefox and stays at the bottom of the page where it belongs. However, it does not work with Internet Explorer. I tried this with Internet Explorer 10. How can I fix this?

I have most of my page in a wrapper and in order for the footer to work, it is outside of the wrapper.

First, I should mention that after looking at the code, I realized that my float doesn't leave space at the bottom in Internet Explorer. Here is the HTML code:

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

This is the CSS for the mainfloat:

#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*/
}

Here is the HTML of the footer (links have been replaced with "#" for the purpose of showing the code):

<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-->

This is the 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%;*/
}

I also included some CSS for the HTML, wrapper and body tags that help the footer:

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

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

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

Is there a way I can just put in a code to fix its compatibility? Is it the main float that is causing the problem?

Any help will be gratefully appreciated. Thank you!