Float problem with IE

Text is clearing when it shouldnt

[Reflection]

Was wondering if anyone can help me out with this one...

I have an iframe that I am floating to the right and I want it to be displayed on the right so that my paragraphs wrap around it(Like the old deprecated align attribute).

<div>
<iframe style="float:right;" .....>
<p></p>
<p>/p>
etc..
</div>

This works perfectly fine in Moz.

In IE the text will not 'wrap' around the iframe, instead the paragraphs begin below the iframe, as if they were 'cleared'. Anyway, I think this is happening because my paragraphs have a width of 90% and the iframe is bigger than the remaining 10% of the container div. So basically, IE decides to move the paragraphs down to where they can be their full 90%. Make sense?

This is a fluid layout so I cant really change the 90% width of the paragraphs.

Anyone have any suggestions?

Thanks

[Noisehag]

What about dropping the iframe into it's own div or table, hardset the width and float it instead of the iframe?

[Reflection]

That would be exactly the same situation, just with a div instead of iframe.

[Noisehag]

I was thinking that maybe IE has a problem with floating iframes. I don't use them so it was just a guess.

[Noisehag]

This appears to be working, but the iframe is then confined to the 90% so not sure if this is what you are after. Sorry if I'm not helping much. :(

<p style="width:90%;"><iframe src="" style="width:100px;height:100px;float:right;"></iframe>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

[createErrorMsg]

paragraphs have a width of 90%

It could be IE's box model screwing things up because the <p> has a width (There are two related issues, one that afflicts IE5.x and IE6 Quirks, and a different one that afflicts IE standards--from what I can tell, either one could potentially result in the problem you describe).

The folks at PIE suggest that you never give the block element which a float will be overlapping an explicit width. Check out this article on the PIE site for details. It might help. ( [positioniseverything.net...] ).

[SuzyUK]

I think this is happening because my paragraphs have a width of 90%

It is.. because that width is triggering IE's buggy float model.. (it will happen with a div as well as an iframe)

you can usually compensate for the IE float model by hacking in a height , but you would need to wrap your <p>'s in a div or something.. and even then it this scenario it means that IE won't wrap the text ..

instead of having a width on the <p> element could you use a left/right margin for it?
e.g. p {margin: 1em 5%;}

Suzy

too slow.. cEM beat me to it.. :)

[Reflection]

Thanks for the suggestions all. I am sure I can come up with some kind of fix/alternative.

instead of having a width on the <p> element could you use a left/right margin for it?

See I would have done that right away but this width is set on all paragraphs(across my site) within my content div, and as far as I can tell there is no way to cancel the cascade effect without defining another width for my affected paragraphs. Basically I can't 'unset' the width on my <p>'s without defining another width, and that of course doesnt solve the problem.

[createErrorMsg]

Basically I can't 'unset' the width

What about removing the 90% from the general p selector and adding it to a classname which you could then apply to non-float-adjacent <p> tags? More work, I suppose, but a solution if nothing else pans out.

[Reflection]

What about removing the 90% from the general p selector and adding it to a classname which you could then apply to non-float-adjacent <p> tags? More work, I suppose, but a solution if nothing else pans out.

Well the width is defined like:

#main p{width:90%;}

Meaning every single paragraph across my 200+ page site is 90% of my main container div, so thats not really an option :)

But I did find a workaround that accomplishes what I need, not perfect but good enough.

[createErrorMsg]

every single paragraph across my 200+ page site is 90% of my main container div

That's a lot of cut and pasting.
Glad to hear you were able to figure out a workaround.