lemmin Posted January 22, 2010 Share Posted January 22, 2010 When you float a DIV in Firefox, it will overlap other content. I don't understand why this happens. It doesn't happen in IE. Here is an example: <html> <head> <style> #div1 { float:left; background-color:red; width:100%; height:100px; } #div2 { background-color:blue; height:150px; width:100%; } </style> </head> <body> <div id="div1">test</div><br> <div id="div2">test</div> </body> </html> The first DIV is displayed as expected in both browsers, but the entire height of the second DIV isn't shown in Firefox because it starts underneath the first DIV, basically. The text is moved down like it should be, though. I can continue adding BR elements to push it down, but I can only move it by a certain amount for each one! IE displays the second DIV exactly as I would expect. Is there a way around this? Maybe a different way to juxtapose two DIVs? Thanks for any help. Link to comment https://forums.phpfreaks.com/topic/189481-floating-divs-in-firefox-vs-ie/ Share on other sites More sharing options...
haku Posted January 23, 2010 Share Posted January 23, 2010 add: clear:left; to the CSS for the bottom div. Link to comment https://forums.phpfreaks.com/topic/189481-floating-divs-in-firefox-vs-ie/#findComment-1000280 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.