I'm having an issue with overlapping text in firefox, below is my code. I want the H2 to behave like the HR is. Right now the H2 goes under the adSpace element. How can I make the H2 stop at the side of the adSpace? the adSpace element could not be in the document too... in that case I would need the H2 to span the entire page, so I cant explicitly set the width of the H2. Thanks <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head></head> <body> <div id="adSpace" style="display:block;float:right;width: 160px; height: 500px; border: 1px solid green;"> Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. </div> <h2 style="border: 1px solid blue; background: #9A2A3A;"> This is a title </h2> <hr/> </body> </html> PHP:
Well, the TEXT of the H2, if it were long enough, WOULD wrap around the ad because the ad is floating right (meaning that the text or any content in the document would flow around it). Now, you know that your ad box is actually floating on TOP of your H2? Give the Ad box a background colour, and it will look like the H2's background has stopped (though actually it continues on like before, just behind the ad box). The horizontal rule is stopping at the float like text would, I think. The background colour of the H2 thinks it's under the adbox, not actually content like text. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head></head> <body> <div id="adSpace" style="[b]background-color: red[/b]; display:block;float:right;width: 160px; height: 500px; border: 1px solid green;"> Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. </div> <h2 style="border: 1px solid blue; background: #9A2A3A;"> This is a title, [b]a really long title, a title that never stops and goes on and on and on and on... forever and ever until it's forced to wrap around the page, as a test to whether the text will indeed wrap like it should.[/b] </h2> <hr/> </body> </html> Code (markup):
I'd also ditch the display: block; on the DIV, since that's the default behavior of a block-level element, and besides, why would you need it when the float property is over-riding it anyway?