I have a fixed width parent div within which I am floating right an image with the tags:
<div style="width: 200px;" class="buggybox imgr" id="g0">
<img class="imgposr" src="../images/irrigation/hip4microwave2.png" alt="Microwave" width="200" height="133">
</div>
with the expectation that the text will wrap around the image.
Unfortunately, IE7 floats the image outside the RHS boundary of the parent div (see http://horticulture127.massey.ac.nz/ie7view.png) whereas FF and Safari display the float and wrapped text within the parent div's boundary (the black vertical lines are the LHS/RHS boundaries of the parent div.
How do I fix this CSS fault? There's just so much info available about IE6/7 problems with right floats that I'm totally overwhelmed and can't see the solution.
.imgr{
float: right;
margin: 4px 0 4px 10px;
padding: 4px;
clear: right;
}
* html .buggybox {height: 1%;}
(imgposr is not a css item - it's a selector for some jquery)