Q:

float being pushed below container

see my page at http://biteof.com/units_and_evidence/, in firefox everything is displaying perfectly.  However in IE the "top" button which is supposed to be floated inside the h2 called "Unit 301: Pre-production skills" floats to the right but is pushed outside of the heading. 
Can anyone see why this would occur? 
HTML: 
<h2>
Unit 301: Pre-production skills
<a class="top" href="http://biteof.com/units_and_evidence/#top"/>
</h2>

CSS:
h2 {
  background:#235ec9 0 0;
  color:#ffffff;
  display:block;
  font-size:16px;
  height:40px;
  line-height:40px;
  margin:10px 0 10px -12px;
  padding-bottom:0;
  padding-left:10px;
  padding-right:10px;
  padding-top:0;
  text-indent:30px;
  width:880px;
  clear:both;
}
a.top:hover {
  background-position:0 -40px;
}
a.top {
  background-image:url(images/top.gif);
  background-position:0 0;
  display:block;
  float:right;
  height:40px;
  width:55px;
}

A:

put the floated a on the left of the html code, like this:
<h2>
<a class="top" href="http://biteof.com/units_and_evidence/#top"/>
Unit 301: Pre-production skills
</h2>

