Hello, I have a floating element to the right, a floating element to the left and some text throughout. I have inserted the code below. If you resize the window (smaller), you will see that the text overlaps the green div once the green div gets pushed below the red div. I think I understand what is going on here...the paragraph elements are just filling in the next available space in line, like it is supposed to?, however, the text shouldn't overlap the green div (ever)... I could put a margin-top: 1em for the green div, but this makes the layout look poor when the green div is not pushed below the red div (wider browser window) as the paragraph text displays higher than the green div's text. This behavior occurs in Mozilla 2. I am thinking this may be a bug, or at least not full CSS compliance. Can anyone confirm this and/or suggest a way to prevent this? In IE 7 the red and green div's are allowed to overlap (a little). This is not prefered! Moreover, the second set of text (the second paragraph block) does not ever appear above the green div. Can anyone suggest a way to prevent this? Thanks to the community in advance, DanK <HTML> <BODY> <DIV style="float: right; border: 2px solid red;">FLOATING RIGHT FLOATING RIGHT FLOATING RIGHT<BR>FLOATING RIGHT FLOATING RIGHT FLOATING RIGHT<BR>FLOATING RIGHT FLOATING RIGHT FLOATING RIGHT<BR>FLOATING RIGHT FLOATING RIGHT FLOATING RIGHT<BR>FLOATING RIGHT FLOATING RIGHT FLOATING RIGHT<BR>FLOATING RIGHT FLOATING RIGHT FLOATING RIGHT<BR> </DIV> <P>Hello this is me being happy</P> <DIV style="float: left; border: 2px solid green;">float:left;float:left;</DIV> <P>How much would i like to be done programming this by now. I envy play. I envy play. I envy play.</P> </BODY> </HTML> Code (markup):
I seemed to get it to work fine by adding margin-top:10px; to the green div. Here's what I came up with: <HTML> <BODY> <DIV style="float: right; border: 2px solid red;">FLOATING RIGHT FLOATING RIGHT FLOATING RIGHT<BR>FLOATING RIGHT FLOATING RIGHT FLOATING RIGHT<BR>FLOATING RIGHT FLOATING RIGHT FLOATING RIGHT<BR>FLOATING RIGHT FLOATING RIGHT FLOATING RIGHT<BR>FLOATING RIGHT FLOATING RIGHT FLOATING RIGHT<BR>FLOATING RIGHT FLOATING RIGHT FLOATING RIGHT<BR> </DIV> <P>Hello this is me being happy</P> <DIV style="margin-top:10px; float: left; border: 2px solid green;">float:left;float:left;</DIV> <P>How much would i like to be done programming this by now. I envy play. I envy play. I envy play.</P> </BODY> </HTML> Code (markup): No matter what I tried, either the div wouldn't line up right, or the text would move into the div. Is it possible to set the div absolutely?