Floating troubles on IE6 and IE7

Question

The header of a sub-section of my site is made of 4 divs vertically stacked. A fifth div, that contains an image, is floated over those 4 divs, a bit away from the right border. This layout works well on Firefox, IE8, Chrome, and other browsers, but on IE7 and IE6 the div does not float over the other divs, messing my layout. How can i fix this?

HTML is as simple as that:

<div class="inter_auth">
  <div class="inter_photo">
    <img name="" src="{{ uri options="image 1" }}" width="100" height="112" border="0" />
  </div>
  <div class="other_div1">
  </div>
  <div class="other_div2">
  </div>
  <div class="other_div3">
  </div>
  <div class="other_div4">
  </div>
</div>

Container CSS is:

.inter_auth { 
  width:315px; 
  background:#ffffff; 
  font-family: Verdana, Geneva, sans-serif; 
  font-size: 10px; 
  text-align:left; 
  min-height:1px;
  overflow:hidden;
  zoom:1; }

Image CSS is:

.inter_photo { 
  position:relative; 
  float:right; 
  margin:2px; 
  top:-2px; 
  left: -15px; 
  background:#899ca2; 
 *background-image: url(transparent.gif); }