SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    floating and clearing IE vs FF

    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
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •