mx482 Posted August 13, 2009 Share Posted August 13, 2009 I am confused about the proper rendering of a float. In this example I have three boxes. The second box is floated left.Firefox (3.0.10) and Internet Explorer (7.0) both float the second box to the left margin below the first box (line below).The third box in Firefox sits below (on same line) the second box (second box covers third box). The third box in IE is adjacent to the box that is floated left (butted up against). Certainly one is right and one is wrong. Can't believe that browsers still can't interpret the specs. Having a hard time learning this without knowing which one is rendering it correctly. Thanks in advance.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><style type="text/css">div.one { background: orange; width:100px; height: 100px;}div.two { background: green; width:100px; height: 100px; float: left;}div.three { background: purple; width:120px; height: 100px;}</style></head><body><div class="one"></div><div class="two"></div><div class="three"></div></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted August 13, 2009 Share Posted August 13, 2009 The <div class="three"> element goes behind the the floated box, that's the way it should work. Any inline content inside that <div> will not go behind.The reason that the <div> itself gets behind the floated box is so that the content within can wrap around and below the box that is floated. Internet Explorer does that wrong. In Internet Explorer, the text inside <div class="three"> will never wrap below <div class="two"> no matter how much vertical space it takes.If you want that effect in standards compliant browsers, give a left margin to <div class="three"> div.three {margin-left: 100px;background: purple;width:120px;height: 100px;} Link to comment Share on other sites More sharing options...
mx482 Posted August 14, 2009 Author Share Posted August 14, 2009 Ingolme,Thanks, that helps. I guess I should have known that Firefox gets it rights. Now my next question is how did you know that? Is there a book that you recommend or did you just know that from your experience. I appreciate your help. Link to comment Share on other sites More sharing options...
Ingolme Posted August 14, 2009 Share Posted August 14, 2009 Ingolme,Thanks, that helps. I guess I should have known that Firefox gets it rights. Now my next question is how did you know that? Is there a book that you recommend or did you just know that from your experience. I appreciate your help.Everything I've learnt came from several years of experience; I haven't learnt through books, though books really are recommended. I'm just lucky that subjects that interest me stick to my head easily. The best way to learn something is to already begin with a lot of interest in the field.When in doubt, checking the HTML and CSS specifications at http://www.w3.org also helps. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.