floating and clearing IE vs FF

[arbel]

Hello,

I'm trying to float a bunch of divs right, all of them have a specified width.
for some of them I apply the clear:right; so that it starts a new line.

this works great in FF, but with ie, only the div that gets the clear jumps to the new line, and the other divs that appear after it, arn't affected and appear in the row above. Anyone know how to solve this.

Here's a link:

http://clalsiud.com/he/node/120

it's in hebrew but where it says :052-6214194 that div had a clear:right on it.

and the divs that follow it are this one,04-6066706 and after that this one:
waheba@clal-ins.co.il


if you can look in firefox, you'll see that they apper in the next row after the div with the clear on it.


Thanks


Idan

[Paul O'B]

HI,

This is a major bug in IE and one that isn't easily solved.

Normally I would simply place a div after the three floated elements with something like <div style="clear:both"></div> which will force the issue and make subsequent floats start on a new line.

Of course if you are in the middle of a ul you can't do this without closing the ul first. If you don't mind closing the ul at the end of every row then you could simply set the ul to clear:both and that would also solve the problem.

However, I'm guessing that you don't want to close the ul and the only workable solution I know involves a hack for IE. The hack is that you have to add a class to the item before the one you want cleared and then remove the float property from it. This will ensure that subsequent floats start on a new line. However the non floated item becomes mis-positioned in a right floated environment so you have to turn it into an inline block element and align it with text-align:right instead.

All of this makes it a little tricky to understand and implement into existing layouts.

Here is a working demo.

http://www.pmob.co.uk/temp/float-clear2.htm

Hope that answers your question