Footer Not Staying on Bottom

Question

I have a website and I am adding a footer to all the pages. On all the pages except for one with boxes on the right side of the page, the footer stays on the bottom. On that page, the footer appears floated to the left of the text, not at the bottom where it should be. Here is the code for that particular page:

HTML

<aside class="expert">
    <h2>Always a Satisfied Customer</h2>
    <ul class="b">
        <li>Upfront Pricing</li>
        <li>Affordable Rates</li>
        <li>Courteous and Respectful</li>
        <li>Always On Time</li>
    </ul>
</aside>

<aside class="refer">
    <p>I would recommend EJP to anyone and everyone!  They showed up, looked at my issue, and fixed it promptly.  They are simply the best!  <br />-Tim S.</p>
</aside>

<p>EJP Electric offers repairs, upgrades, and installations, delivering high customer satisfaction by getting the job done right the first time.</p>

<footer>
    <div id="footer">
        <address>EJP Electric<br />
                 8603 E M115<br />
                 Cadillac, MI 49601<br />
                 231-775-3799<br />
                 <a href="mailto:ray@ejpelectric.com">Email</a>
        </address>
    </div>
</footer>

CSS

.expert {
    background-color: white;
    display: block;
    border: solid;
    float: right;
    right: 20px;
    padding: 3px;
}

.refer {
    background-color: white;
    border: solid;
    float: right;
    clear: right;
    width: 150px;
    display: block;
    margin-top: 5px;
    padding: 5px;
}


#footer {
    position: absolute;
    width: 600px;
    font-size: 12px;
    float: left;
} 

Answer 1

Your markup is not correct according to HTML5 semantic, of course if its not only the part of it, you can read about this here: html5doctor

Now about your question:

html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}

#main {
    padding-bottom: 150px; /*should be the same as footer height*/
}
#footer { 
    position: relative;
    margin-top: -150px; /*negative value of footer height*/
    height: 150px;
    clear: both;
} 

<div id="wrap">
    <div id="main"></div>
</div>
<div id="footer"></div>

Answer 2

You should clear the floating with the clear property:

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

footer {
  clear: both;
}

.expert {
  background-color: white;
  display: block;
  border: solid;
  float: right;
  right: 20px;
  padding: 3px;
}
.refer {
  background-color: white;
  border: solid;
  float: right;
  clear: right;
  width: 150px;
  display: block;
  margin-top: 5px;
  padding: 5px;
}
#footer {
  position: absolute;
  width: 600px;
  font-size: 12px;
  float: left;
}
footer {
  clear: both;
}

<aside class="expert">
  <h2>Always a Satisfied Customer</h2>
  <ul class="b">
    <li>Upfront Pricing</li>
    <li>Affordable Rates</li>
    <li>Courteous and Respectful</li>
    <li>Always On Time</li>
  </ul>
</aside>

<aside class="refer">
  <p>I would recommend EJP to anyone and everyone!  They showed up, looked at my issue, and fixed it promptly.  They are simply the best!  <br />-Tim S.</p>
</aside>

<p>EJP Electric offers repairs, upgrades, and installations, delivering high customer satisfaction by getting the job done right the first time.</p>

<footer>
  <div id="footer">
    <address>EJP Electric<br />
      8603 E M115<br />
      Cadillac, MI 49601<br />
      231-775-3799<br />
      <a href="mailto:ray@ejpelectric.com">Email</a></address>
  </div>
</footer>