tags:

views:

290

answers:

3

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)

A: 

You could try the following:

.imgr {
    overflow:auto;
}
jao
That'll add a scrollbar, not what the asker wants.
Paul Fisher
It won't add a scrollbar if isn't neccesary. I've used the same approach. Another way to fix this is to add a float to the parent element.
jao
A: 

It seems like something is setting the width of your 'buggybox' to 1px for some reason - that is the only way I was able to get a result that resembles what you are describing.

If at all possible, could you try to post a more complete bit of code that has the problem in it? Try to make the code as short as possible, removing everything irrelevant. I have the following code setup, which I think does what you want.

When I add a width of 1 px to the .imgr div, I get the same result as in the picture you've supplied (in both Firefox and IE), which is why I suspect that is where your problem is.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<style type="text/css">
#parent {
    width: 600px;
    border: 1px solid black;
}

.imgr{   
    float: right;    
    margin: 4px 0 4px 10px;    
    padding: 4px;    
    clear: right;
}
</style>
</head>
<body>
<div id="parent">
    <div class="buggybox imgr" id="g0">
     <img class="imgposr" src="../images/irrigation/hip4microwave2.png" alt="Microwave" width="200" height="133">
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec sapien libero, eget interdum lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi rutrum interdum dui ac ultrices. Donec pulvinar feugiat nibh, sit amet rhoncus sapien consectetur quis. In orci ante, bibendum sit amet euismod eu, tristique ac erat. Donec in enim nisl. Etiam vestibulum scelerisque purus, et fringilla nibh malesuada sit amet. Praesent magna mi, egestas quis commodo a, vulputate ut sem. Nullam auctor vulputate justo, vel pharetra lectus pulvinar eget. Curabitur dignissim lectus nec ligula rutrum et pellentesque metus auctor. Sed metus diam, aliquet non malesuada vitae, tincidunt sit amet augue. Aliquam luctus posuere eros, non adipiscing ante varius sed. 
</div>
</body>
</html>

Hope this helps!

ylebre
A: 

You need to add position:relative; to the parent element.

Josh Stodola