2 Image float problem

having an issue with IE and 2 images.

[mikelostcause]

I am having an issue with IE not behaving correctly with 2 images.

I want the first image to float left, then the second image to float to the right, below the first image and have the text intertwined between the two.

The height_holder was added later to try to force the right image down after it wouldn't clear. This doesn't seem to work as the holder still will not clear past the image_one.

<style>
/* first style try */
.image_one{
float: left;
display: inline;
margin: 0px 20px 20px 0;
}
.height_holder{
width: 1px;
height: 50px;
float: right;
clear: both;
}
.image_two{
float: right;
clear: left;
display: inline;
margin: 20px 0px 20px 20px;
}
</style>

<div class="image_one"> <img src="img.jpg"/>
<div class="caption">Image Caption</div>
</div>

<div class="height_holder"></div>

<div class="image_two">
<img src="img.jpg"/>
<div class="caption">Image Caption</div>
</div>

<p>Long body Test</p>

[penders]

Hi mikelostcause, you need to arrange your HTML more like this:

<div class="image_one">img here...</div> 
<p>Long body Test flows to the right of image_one</p> 
<p>Long body Test cont...</p>  
<p>Long body Test</p>  
<div class="image_two">img here...</div> 
<p>Long body Test flows to the left of image_two</p>  
<p>Long body Test cont...</p>

You can lose your 'height_holder' and

display:inline

rules, as floated elements are computed as display:block (they aren't inline).

[Setek]

<div class="image_one">img here...</div>

<p>Long body Test flows to the right of image_one</p>
<p>Long body Test cont...</p>
<p>Long body Test</p>

<div class="image_two">img here...</div>

<p>Long body Test flows to the left of image_two</p>
<p>Long body Test cont...</p>

You can lose your 'height_holder' and display:inline rules, as floated elements are computed as display:block (they aren't inline).

There's a valid reason

display: inline;

is set, because otherwise IE 6 is affected by a double margin float bug.

Other than that, it's probably better to use penders' example code :)

[mikelostcause]

The problem is the text is dynamic, driven from a CMS. So I have no way of knowing how long the text is going to be or where the paragraph breaks are. The image placement needs to work without placing the image tags in the middle of the text unless I can come up with a good way to 'guess' where to put them.

- Yes, the inline is for the IE6 float margin bug. We have to have our pages support IE6 as well.

[penders]

- Yes, the inline is for the IE6 float margin bug.

Oops, had just forgotten about that - thanks for pointing that one out! In fact I used

display:inline

just yesterday (having seen your comments) for that very purpose! :)

However, I believe your code (as it stands) doesn't actually exhibit the 'double margin float bug' in IE, since it has a zero margin in the direction of the float. Although it is still possible you may still suffer from the related 'fake indent' IE bug, but if you enclose your text in <p>'s (which you are by the look) then I recon you should be OK and safe to remove the

display:inline

line afterall, but hey. (?)

Back to the original problem... I can only think to use JS/PHP in order to break up your 'dynamic' text into chunks of say N (500 maybe?) chars (breaking at a CR/LF after this number) and placing them into containers in the arrangment as specified above...?

[mikelostcause]

I'll check into the js character count idea and also the display:inline thing, it's nearly just second nature to add inline after a float. I've currently let the page loose in the wild even with the horrible display bug in IE6 showing and I'll be working to clean that up tomorrow.