Floating troubles on IE6 and IE7

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); }

---

You can, instead, try to position the elements absolutely. Your wrapper .inter_auth should be positioned relatively and the child divs can be positioned absolutely within the parent div. You should be able to align them exactly by using the top, left, bottom and right properties. Here is a quick tutorial on positioning. Check out the part at the bottom about overlapping elements.