SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: IE float bug

  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)

    IE float bug - Moving upwards because there's room

    Hi,

    I have a list like the following

    # 1 style="float: left"
    # 2 style="float: left"
    # 3 style="float: left; clear: left"
    # 4 style="float: left;"
    # 5 style="float: left; clear: left"
    # 6 1 style="float: left;"

    The 'columns' are 50% -1px wide.

    #1 has a greater height than #2
    In FF, #4 and #6 are floated and sit happily next to their cleared neighbours.
    In IE the float Jumps upwards and fills the gaps in the columns.

    How do I prevent this?

    Thanks,
    Last edited by markbrown4; Oct 7, 2007 at 22:53.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    A test case:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .floats { overflow: hidden; width: 100&#37;; background: #F93; }
    .floats div { float: left; width: 50%; margin-left: -1px; background: #F93; border-top: 1px solid #FFF;}
    .clear { clear: both }
    </style>
    </head>
    
    <body>
    <div class="floats">
      <div>1<br>is longer than 2</div>
      <div>2</div>
      <div class="clear">3<br>
      is longer than 4</div>
      <div>4</div>
      <div class="clear">5</div>
      <div>6</div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Had the same problem in the past.

    I've usually got around this by adding a <div> for the row itself to group the two row items together.

    Alternatively, if it makes semantic sense for there to be a line-break then I'd be tempted to simply add a <br> after the row ends.

    Code:
    <div class="floats">
      <div>1<br>is longer than 2</div>
      <div>2</div><br>
      <div class="clear">3<br>is longer than 4</div>
      <div>4</div><br>
      <div class="clear">5</div>
      <div>6</div>
    </div>
    Neither are ideal though and I know people are a bit weary of overusing the <br> tag as it's been abused in the past but seeing as this isn't using it instead of using padding/margin and is actually being used to cause a line break then I don't personally see anything wrong with using it in this situation.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hi Dave,

    That's a decent solution, I just ended putting in clearing div's in between in defeat - I'll change them to line breaks.

    I'm interested if there's some CSS magic to twist IE's arm though..

    Thanks,

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,829
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    IE has many bugs like this and the only solution is as CSSwiz said in that you need to clear both floats with a 100&#37; wide clearer.

    Personally I would wrap the rows in a div (or a more semantic element depending on the situation) because once you put a break in the html you can't alter it from the stylesheet.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Personally I would wrap the rows in a div (or a more semantic element depending on the situation) because once you put a break in the html you can't alter it from the stylesheet.
    I tend to use that solution as well but if you decided that you wanted four items on a row instead of two then you'd still be left with the same problem of tweaking the HTML.

    Admittedly, it would probably be a little more flexible in that you could change the width's to stop the clearing but I don't think either solution is perfect unfortunately and in reality would probably mean that you'd have to alter the HTML.

    I do usually wrap the row in a div though as it does allow a little more flexibility for introducing things like borders along the bottom of the row for example or if you want the row to be a different colour from the container div.


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
  •