phpknight Posted August 12, 2007 Share Posted August 12, 2007 I have three divs that float. They all have the same properties besides the floating part: margin-top: 100px; width: 200px; padding: 10px; Here is the problem. I float the first box left. In my source (CSS and xhtml both validated), I print the boxes 1, 2, 3. The second two boxes are floating right. So, based on the rule that no right floated element can be placed further to the right than one in the previous source, I am expecting this order: 1, 2, 3. But, I get this order: 1, 3, 2 But if I float the second box left, it appears 1, 2, 3. Can anybody help me figure this out or point out where I am missing something? All necessary code is below. *.formbackground { background-color : rgb(255, 250, 170); border-style: solid; border-width : 2px; border-color : red; } div#accountSummary { margin-top: 100px; float: left; width: 200px; padding: 10px; } div#personalInfo { margin-top: 100px; float: right; width: 200px; padding: 10px; } div#imageCenterSmall { margin-top: 100px; float: right; width: 200px; padding: 10px; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rel="stylesheet" type="text/css" href="shop.css" media="all" /> </head> <body> <div class="formbackground" id="accountSummary">box 1</div> <div class="formbackground" id="personalInfo">box 2</div> <div class="formbackground" id="imageCenterSmall">box 3--why is this in the middle?</div></body> </html> Quote Link to comment Share on other sites More sharing options...
moberemk Posted August 12, 2007 Share Posted August 12, 2007 Think of it this way-box 2 is the one that is being floated right FIRST in order of the code, and box three is being floated after box 1, meaning that it ends up in the middle. To see more clearly what happens when code is floated right, make an <ol> element and have all the <li>'s floated right-that's a clear demonstration of this property at work. Quote Link to comment Share on other sites More sharing options...
phpknight Posted August 12, 2007 Author Share Posted August 12, 2007 Okay, I wrote out that example, and I see what you mean--it appears backwards. BUT, why isn't that against the rules? The browser is floating an element earlier in the source farther to the right. ??? Also, is it normal for the list marker to go away like that? And, if I copy/paste, it appears in the correct order on the paste! Quote Link to comment Share on other sites More sharing options...
moberemk Posted August 18, 2007 Share Posted August 18, 2007 That's the way it's supposed to work-the float command detaches the element from the document structure, making it so that it doesn't have to obey the order in the source code. And yes, it is normal for that to happen. Quote Link to comment Share on other sites More sharing options...
phpknight Posted August 18, 2007 Author Share Posted August 18, 2007 Yeah, I eventually figured that out, but I had forgotten about this post. It just seems to conflict with what I read in the definitive guide. Thanks! 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.