That code shows the left (green) DIV completely below the right (red) one in Firefox (for me anyway).
http://www.water-well.net/float.html I see this in firefox like this: 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?
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.
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.
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
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.
ok I've found a work around which works at 800 x 600 http://www.water-well.net/float.html but it requires a width setting in the left div.
Dude, I figured it out! Use this in the block that is overlapping: overflow: auto; Code (css): Some details on it here: http://www.digitalpoint.com/~shawn/2005/10/css-overflow-auto.html
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.
Yeah, I figured out it doesn't work in IE. Oh well... still better than it not working with ANYTHING.
If your float has fixed width, then setting margin-right on the left-side element will work in all browsers.
I know... problem is I want elements to wrap around the float once it has (automatically) cleared it.
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.
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?
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): <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):
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.
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.
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?
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.