ie7 weird float right problem

Question

hi guys

here is the html code that is giving me problem in IE7

<div style="position:absolute;top:276px;left:194px;" class="drag layer_3">
<img class="deleteitem" height="12px" width="12px" title="Remove" src="/static/redclose.png" style="float:right;cursor:pointer;">
<img src="/static/18.png"  >
</div>

this is how it is supposed to look, and it looks fine in ie8, firefox

but in IE7, the float right image jumps to the right end of the document like this

how do i fix this? i tried removing the height width attributes and use max-height,max-width. that did not help. thanks a lot

Answer 1

I believe the element in question is floating to the right of the parent of "drag layer_3", once you have made someone an absolute position its taken out of the normal document flow.

Answer 2

Your question might have been answered here: http://stackoverflow.com/questions/428862/floating-too-far-right

He suggests using jQuery to do this, since it is written to be browser-independent.

Also, see the original author's solution at the bottom (not using jQuery).

Answer 3

I think we need to see .drag and layer_3. At the moment I can see no defined width for Remove's parent. I believe the width of your div might be different in ie7. Try adding a border to it to see its computed width.

Answer 4

You could either set the width of the div explicity or reverse the order of the images and float left instead of right:

<div style="position:absolute;top:276px;left:194px;" class="drag layer_3">
    <img src="/static/18.png" style="float:left"  >
    <img class="deleteitem" height="12px" width="12px" title="Remove"
         src="/static/redclose.png" style="cursor:pointer;">
</div>