1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Colliding DIVs

Discussion in 'CSS' started by digitalpoint, Oct 17, 2005.

0
Page 2 of 2
  1. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #21
    That code shows the left (green) DIV completely below the right (red) one in Firefox (for me anyway).
     
    digitalpoint, Oct 20, 2005 IP
  2. elkiwi

    elkiwi Active Member

    Messages:
    536
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    68
    #22
    http://www.water-well.net/float.html

    I see this in firefox like this:

    [​IMG]

    with this code:

    <html>
<body>
<div style="border: 1px solid #f00; float:right; width:100px;  margin: 10px;">floating this to the right</div>
<div style="background-color: #ddd; float:left; border: 1px solid #0f0;">If you float a div, the text within another div wraps around it, but the border of that div extends through the div that is floating.  Anyone know of a way to prevent this?</div>
</body>
</html>
    Code (markup):
    I can't see the left below the right when you add the float left?
     
    elkiwi, Oct 20, 2005 IP
  3. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #23
    I'm just not seeing it... I tried the above link with 3 different versions of Firefox on 2 different platforms and none show like that for me.
     
    digitalpoint, Oct 21, 2005 IP
  4. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #24
    elkiwi

    The reason you see it like this is because your browser window is larger than the width of the green <div>. Shrink your window and you'll see.

    [​IMG]
     
    Arnica, Oct 21, 2005 IP
  5. elkiwi

    elkiwi Active Member

    Messages:
    536
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    68
    #25
    Yeah I figured that out but still can't find a solution, seem ie and ff render floats completely different but it's an ie fault not ff as far as I can see.

    this page is about postitioning with floats but still doesn't solve the original problem.

    http://www.positioniseverything.net/easyclearing.html
     
    elkiwi, Oct 21, 2005 IP
  6. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #26
    This behavior is by design (CSS design, that is) - floats behave as if block-level elements do not exist. The best way to fix this is to add a margin to the left div. For example:

    <div style="margin-right: 150px; background-color: #ddd; border: 1px solid #0f0;">If you float a div, the text within another div wraps around it, but the border of that div extends through the div that is floating. Anyone know of a way to prevent this?</div>

    J.D.
     
    J.D., Oct 21, 2005 IP
  7. elkiwi

    elkiwi Active Member

    Messages:
    536
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    68
    #27
    elkiwi, Oct 21, 2005 IP
  8. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #28
    Just use a fixed margin and it will work on any resolution.
     
    J.D., Oct 21, 2005 IP
  9. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #29
    digitalpoint, Oct 23, 2005 IP
  10. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #30
    It is true, setting overflow to anything but visible on a block-level element will establish new formatting context and any floats must not overlap such elements. It won't work in IE, though.

    J.D.
     
    J.D., Oct 23, 2005 IP
  11. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #31
    Yeah, I figured out it doesn't work in IE. Oh well... still better than it not working with ANYTHING. :)
     
    digitalpoint, Oct 23, 2005 IP
  12. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #32
    If your float has fixed width, then setting margin-right on the left-side element will work in all browsers.
     
    J.D., Oct 24, 2005 IP
  13. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #33
    I know... problem is I want elements to wrap around the float once it has (automatically) cleared it.
     
    digitalpoint, Oct 24, 2005 IP
  14. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #34
    Okay, I think I came up with something that works in IE (as well as others). Wrap the overlapping div in <fieldset> tags. It's an idiotic workaround, but at least it's working for me.
     
    digitalpoint, Oct 24, 2005 IP
  15. astralis

    astralis Peon

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #35
    I'm having the same exact same problem and have resorted to the fieldset hack. I understand CSS is supposed to do this, but it is so unusual. Is there an update on a different way around this?
     
    astralis, Feb 21, 2006 IP
  16. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #36
    It has been mentioned several times that a right margin is all you need.

    <div style="border: 1px solid red; float:right; width:100px; height:100px">floating this to the right</div>
<div style="background-color: silver; border: 1px solid green">If you float a div, the text within another div wraps around it, but the border of that div extends through the div that is floating.  Anyone know of a way to prevent this?</div>
    Code (markup):
    [​IMG]

    <div style="border: 1px solid red; float:right; width:100px; height:100px">floating this to the right</div>
<div style="background-color: silver; border: 1px solid green; [color=red]margin-right: 102px[/color]">If you float a div, the text within another div wraps around it, but the border of that div extends through the div that is floating.  Anyone know of a way to prevent this?</div>
    Code (markup):
    [​IMG]
     
    FeelLikeANut, Feb 21, 2006 IP
  17. astralis

    astralis Peon

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #37
    I tried that but then once the div goes under the floating right div it will not wrap if there's a margin. So, I can't use a margin if I want it to eventually wrap.
     
    astralis, Feb 21, 2006 IP
  18. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #38
    Of course. If it did then the DIV would no longer be a box, it would be a polygon. I don't believe browsers deal with polygons.
     
    FeelLikeANut, Feb 21, 2006 IP
  19. astralis

    astralis Peon

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #39
    No, they don't.

    I guess I'm going to go with a table. That would have saved me a lot of time. Why is css so hyped?
     
    astralis, Feb 21, 2006 IP
  20. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #40
    Because, once you become accustomed with CSS it is far more powerful than tables can be. A site styled purely with CSS is also much more maintainable; the smallest change, or a complete redesign can be implemented in seconds by simply switching the style sheet referenced. And even more, semantic HTML--which tables-for-layout is not--ensures that your page will be usable to every user and every browsing device.
     
    FeelLikeANut, Feb 21, 2006 IP
Page 2 of 2