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. Quote Link to comment 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.