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:
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:
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.
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:
I was wondering if it could be done with the z index, but can't figure it out. I did find this, maybe you can make some sense of it http://developer.mozilla.org/en/docs/Understanding_CSS_z-index:Stacking_and_float
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).
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):
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:
Man, that is annoying... I ended up just letting them collide rather than wrap a table around all my H1 tags (dates) here: http://www.digitalpoint.com/~shawn/
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
I don't want to "clear:right" though... then the posts would be under the bottom of the sidebar (which would look REALLY bad).
sorry i just started looking at halloween 2003 party fotos and cant remeber what this thread is about anymore http://www.digitalpoint.com/~shawn/gallery/halloween2003/DSC00143
<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.