Jump to content

Float Example Which Browser Gets It Right;


mx482
 Share

Recommended Posts

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...