Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: IE6's Float Drop - is there a real fix?

  1. #1
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default IE6's Float Drop - is there a real fix?

    Hi all,

    I've found over a dozen articles/discussions saying that the way to fix IE6's float drop is to avoid the things that would trigger it. I'm wondering if an actual fix exists, because I can't find one.

    Say you have a 1000px width div, with two inner divs, div1 and div2. div1 needs to have 100% width, and div2 needs to have a fixed width and be floated right.

    In IE6, this situation will always result in the float drop. I need the background color of div1 to expand all the way across the container and behind div2.

    The only "fix" I've found is to set div1's display property to "inline", but that kills the 100% width.

    Does anyone have a solution?

    Thanks!

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Quote Originally Posted by jlizarraga View Post
    I've found over a dozen articles/discussions saying that the way to fix IE6's float drop is to avoid the things that would trigger it. I'm wondering if an actual fix exists, because I can't find one.
    What's float drop
    Can you show us a sample code of this existence.
    Quote Originally Posted by jlizarraga View Post
    Say you have a 1000px width div, with two inner divs, div1 and div2. div1 needs to have 100% width, and div2 needs to have a fixed width and be floated right.
    In IE6, this situation will always result in the float drop. I need the background color of div1 to expand all the way across the container and behind div2.
    It does'nt makes sense. A width of 100% means the width of it's parent container. So, if you set your parent container's width to 1000px, and you set div1's width to 100%, then it will take 1000px.

    Quote Originally Posted by jlizarraga View Post
    The only "fix" I've found is to set div1's display property to "inline", but that kills the 100% width.

    Does anyone have a solution?

    Thanks!
    I can't really provide a fix, not unless a code is visible.

    And also, never miss a DTD.

    Hope that makes sense.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    Here is the exact example I described:

    http://autofusion.com/development/mm3/test.html

    So simple, yet so hard to solve!

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Remove highlighted:
    Code:
    #div1 {
    	width: 100%;
    	height: auto;
    	background-color: #000000;
    	color: #ffffff;
    }
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. The Following User Says Thank You to rangana For This Useful Post:

    jlizarraga (08-21-2008)

  6. #5
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    Sweet, thanks a bunch.

    But it only works for my case. Check the link again and try to solve it!

  7. #6
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    What you have now is erroneous.

    Div1 and Div2 are contained in container div whose width is (only) 1000px.

    You set div1's width to 900px and div2's width to 200px which sums to 1100px.

    With that said, you have an extra 100px. So the fix is by reducing the widths either of div1 or div2 a 100px.

    Hope that makes sense.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  8. #7
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    Doesn't floating div2 take it out of the flow? Shouldn't its width not matter since its floated? Firefox and Safari and the validator think so.

  9. #8
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    Am I confused about floats? Do I need to use absolute positioning for div2?

  10. #9
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Quote Originally Posted by jlizarraga View Post
    Doesn't floating div2 take it out of the flow? Shouldn't its width not matter since its floated? Firefox and Safari and the validator think so.
    No, the width will matter since floated element is laid out according to the
    normal flow (The content will flow down the page, starting with the first
    element in your document and finishing with the last element in your document),
    then taken out of the flow and shifted either to the left or to the right.

    You should always set a width on floated items (except for images which has implicit width).
    The spec states a floating box must have an explicit width.

    Quote Originally Posted by jlizarraga View Post
    Am I confused about floats? Do I need to use absolute positioning for div2?
    The solution suggested on post#6 should have worked (tested on IE6,7,FF, Safari and Opera).
    I don't usually advocate the use of absolute positioning since it gives your page a brittle layout. The element
    does'nt observe the normal flow.

    For further reading:
    http://css.maxdesign.com.au/floatuto...troduction.htm

    Hope that makes sense.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  11. #10
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    Thank you for your help.

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
  •