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 1 of 2
  1. #1
    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?

    Here's an example: 
    <html>
<body>
<div style="border: 1px solid #f00; float:right; width:100px; height:100px; margin: 10px;">floating this to the right</div><br />
<div style="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>
</body>
</html>
    HTML:

     
    digitalpoint, Oct 17, 2005 IP
  2. TheHoff

    TheHoff Peon

    Messages:
    1,530
    Likes Received:
    130
    Best Answers:
    0
    Trophy Points:
    0
    #2
    add float:left; to the other. Also there is a typo in the second div style, 10px:10px;

    <html>

      <body>

      <div style="border: 1px solid #f00; float:right; width:100px; height:100px; margin: 10px;">floating this to the right</div><br />

      <div style="background-color: #ddd; border: 1px solid #0f0;margin:10px; float:left;">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>
    HTML:
     
    TheHoff, Oct 17, 2005 IP
  3. TheHoff

    TheHoff Peon

    Messages:
    1,530
    Likes Received:
    130
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Also, adding width:100% to the second div (without the float left) works.
     
    TheHoff, Oct 17, 2005 IP
  4. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #4
    Oops on the typo. I was trying to make a quick example. Dunno where that came from. hehe

    Adding the float:left moves the left div below the right one (which I don't want). Also, a width:100% on it doesn't change it (with or without) for me.
     
    digitalpoint, Oct 17, 2005 IP
  5. LGRComp

    LGRComp Well-Known Member

    Messages:
    516
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    195
    #5
    The only way I know, but there might be others, is to define a margin for the div that you don't want the border to extend on. So in this case the div that you want on the left define a margin so the border does not continue. Something like this:
    
      <div style="border: 1px solid #f00; float:right; width:100px; height:100px; margin: 10px;">floating this to the right</div><br />
      <div style="background-color: #ddd; border: 1px solid #0f0;margin:10px 150px auto auto">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>
    HTML:
     
    LGRComp, Oct 17, 2005 IP
  6. fryman

    fryman Kiss my rep

    Messages:
    9,604
    Likes Received:
    777
    Best Answers:
    0
    Trophy Points:
    370
    #6
    fryman, Oct 17, 2005 IP
  7. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #7
    Yeah, I don't want to force a specific width though because the floating div is the one that is variable width (or might not even be there at all).
     
    digitalpoint, Oct 17, 2005 IP
  8. TheHoff

    TheHoff Peon

    Messages:
    1,530
    Likes Received:
    130
    Best Answers:
    0
    Trophy Points:
    0
    #8
    They both work in IE, but not in FF. Lovely.
     
    TheHoff, Oct 17, 2005 IP
    digitalpoint likes this.
  9. torunforever

    torunforever Peon

    Messages:
    414
    Likes Received:
    36
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Try using display: inline in second div. It prevents the two divs from overlapping and puts them where you want. Works in IE and Firefox. Then again, it introduces an undesired effect where the background color and border only surround the text since it's no longer a block.

    
<div style="border: 1px solid #f00; float: right; width:100px; height:100px; margin: 10px;">floating this to the right</div><br />
<div style="display: inline; 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>
    Code (html4strict):
     
    torunforever, Oct 17, 2005 IP
  10. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #10
    Yeah, I don't really want to make it an inline object. It gives worse results for what I'm trying to do. The only thing I've come up with so far is to use a 1 row, 1 cell table instead of the left DIV like so: 
    <html>
<body>
<div style="border: 1px solid #f00; float:right; width:100px; height:100px; margin: 10px;">floating this to the right</div><br />
<table style="background-color: #ddd; border: 1px solid #0f0;"><tr><td>
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?
</td></tr></table>
</body>
</html>
    HTML:
     
    digitalpoint, Oct 17, 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
    #11
    digitalpoint, Oct 19, 2005 IP
  12. mcfox

    mcfox Wind Maker

    Messages:
    7,526
    Likes Received:
    716
    Best Answers:
    0
    Trophy Points:
    360
    #12
    Just a thought but if you nest the divs, wouldn't that prevent the overlap?
     
    mcfox, Oct 20, 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
    #13
    Nope... doesn't seem to.
     
    digitalpoint, Oct 20, 2005 IP
  14. Arnica

    Arnica Peon

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

    I would add 'clear:right;' to your H1 style and maybe even your .post class which would stop the overlap (but obviously will leave some additional white space between posts).

    Regards

    Mick
     
    Arnica, Oct 20, 2005 IP
  15. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #15
    I don't want to "clear:right" though... then the posts would be under the bottom of the sidebar (which would look REALLY bad). :)
     
    digitalpoint, Oct 20, 2005 IP
  16. elkiwi

    elkiwi Active Member

    Messages:
    536
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    68
    #16
    elkiwi, Oct 20, 2005 IP
  17. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #17
    You like the demon growing out the stereo cabinet, huh?
     
    digitalpoint, Oct 20, 2005 IP
  18. elkiwi

    elkiwi Active Member

    Messages:
    536
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    68
    #18
    Colliding divas growing out of demon's cabinets....uh oh...
     
    elkiwi, Oct 20, 2005 IP
  19. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Whoops, missed the floated sidebar. :eek:
     
    Arnica, Oct 20, 2005 IP
  20. elkiwi

    elkiwi Active Member

    Messages:
    536
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    68
    #20 
    <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):
    What do you see? in what browser?

    Float left works for me in ie and ff, although the left div is slightly above the right div.
     
    elkiwi, Oct 20, 2005 IP
Page 1 of 2