 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / January 2008margin-top and div floats
I have two div's that have float:left and a third that has clear:left and margin-top:10px. In IE 6 & 7, it displays as I intended, but in Safari, Firefox, Opera, it "ignores" the margin-top of the third div. If I put a margin-bottom:10px on one of the first two floated divs, I can get the desired effect, but am curious as to why it is not "working" in the non-ie browsers as initially stated? Sample: http://www.ericmmartin.com/code/css/margin-float.html > I have two div's that have float:left and a third that has clear:left > and margin-top:10px. In IE 6 & 7, it displays as I intended, but in [quoted text clipped - 6 lines] > Sample: > http://www.ericmmartin.com/code/css/margin-float.html Usenet is a great resource. You can learn a great deal, and get a lot of your questions answered here. That's part of why it's such a good idea to lurk in a newsgroup for a while, read through recent posts, and search the archives for discussions that may discuss the very thing you're looking for. You don't even have to post. As it happens, the thread "two-up" from your post[1] discusses the very thing which you're fighting against. See if this helps you: <91a468b2-c517-4276-9ef6-0e217e9758c3@n20g2000hsh.googlegroups.com>. The thread is titled "Collapsing vertical margins on first block?" Look especially at Ben C's replies in that thread (and in general, too; he has a great awareness of CSS behavior). There is a phenomenon known as collapsing margins, which is what I think you're seeing. Your third div is not a float, although it appears it could be. If you make it a float (at least in your example), the top margin won't collapse and you'll see some space between divs. HTH [1] As seen in my newsreader, on this server, YMMV, etc.  SignatureJohn Remembering the UIP: http://improve-usenet.org/ On Jan 24, 5:00 pm, John Hosking <J...@DELETE.Hosking.name.INVALID> wrote: > > I have two div's that have float:left and a third that has clear:left > > and margin-top:10px. In IE 6 & 7, it displays as I intended, but in [quoted text clipped - 12 lines] > search the archives for discussions that may discuss the very thing > you're looking for. You don't even have to post. Thanks John. All things that I do, and did, before posting... > As it happens, the thread "two-up" from your post[1] discusses the very > thing which you're fighting against. See if this helps you: > <91a468b2-c517-4276-9ef6-0e217e975...@n20g2000hsh.googlegroups.com>. The > thread is titled "Collapsing vertical margins on first block?" Look > especially at Ben C's replies in that thread (and in general, too; he > has a great awareness of CSS behavior). I would have never associated the thread you mentioned to my question and it certainly didn't show up on my searches...but that may be because I just don't understand the problem. It may be the same issue...I'm still trying to figure that out. Thanks for the tip about Ben C! > There is a phenomenon known as collapsing margins, which is what I think > you're seeing. Your third div is not a float, although it appears it > could be. If you make it a float (at least in your example), the top > margin won't collapse and you'll see some space between divs. Thanks, I'll look more into collapsing margins. I tried making the "third" div float:left, as you seem to have suggested, but it didn't help. I'll keep on trying/researching. > -- > John > Remembering the UIP:http://improve-usenet.org/ Thanks for the link. From what I read, a majority of "subscribers" will never see my posts. The convenience of GG sure is nice when you are on the road or at work...too bad it has become such a source of negativity. Unfortunately the medium I used to interact with this resource comes with so many connotations...I was genuinely trying to seek feedback and learn about an issue I was having. Regards, Eric > On Jan 24, 5:00 pm, John Hosking <J...@DELETE.Hosking.name.INVALID> [...] >> There is a phenomenon known as collapsing margins, which is what I think >> you're seeing. Your third div is not a float, although it appears it >> could be. If you make it a float (at least in your example), the top >> margin won't collapse and you'll see some space between divs. Collapsing margins isn't actually the phenomenon here, but the way clear works, but that's also different for floats. Clear on non-floats is supposed to move a box down by far enough that its top _border_ is clear of the other floats[1]. Therefore you won't see its top margin between it and the floats above it. But for a floated box, clear is supposed to move it down far enough that its top _margin_ clears the floats. So you should see the top margin of a cleared float after all. Margins never collapse between floats, so a float with 40px bottom margin followed by a clearing float with a 40px top margin ought to result in an 80px gap between them. But put a normal-flow block with a top margin of 40px after a float with a bottom margin of 40px, and you should just see a 40px gap. But it's not because margins have collapsed. Margins on floats never collapse. It's just that the clearance applied to the block is enough to get its border clear, not its margin. See also http://groups.google.co.uk/group/comp.infosystems.www.authoring.stylesheets/msg/ ae64c0c59f491719 I don't know what IE does. Firefox/Opera/Konqueror do everything correctly except for [1] below. [1] In fact the browser is supposed to work out its top margin first, before moving it down to clear anything, which includes collapsing with any other margins it is "adjoining" to. After doing that it might not need to move it down if the calculated margin is bigger than the amount of clearance needed to get its top border clear of the floats. So in other words, if you set a huge top margin on the cleared element, you should still see some of it. But neither FF, Opera or Konqueror actually do this. In article <ed3bc541-eb6d-4bdb-bb36-8b27c4f31bdb@1g2000hsl.googlegroups.com> , > I have two div's that have float:left and a third that has clear:left > and margin-top:10px. In IE 6 & 7, it displays as I intended, but in [quoted text clipped - 6 lines] > Sample: > http://www.ericmmartin.com/code/css/margin-float.html It is a difficult matter. You can read about collapsing margins if you want at <http://www.w3.org/TR/CSS21/box.html#collapsing-margins> but it is not an easy read at all and there are quite some complications. You will see how the essentials appear differently in different browsers: <http://netweaver.com.au/alt/martin.html> In iCab (surprise?) and Mac IE5 (and I would bet quids on Win IE6 and a good few less quids on IE7) you will have the 10px white space of the body showing. But not on FF, Camino, Opera, Safari. I will be adding a few pages on this stuff at some stage to: <http://netweaver.com.au/floatHouse/> But here are a couple of things to be considered: Let's try to be practical. You know about a bottom margin on a float - that is easiest way to go probably. But suppose this is not desirable for some reason. What then? How about not clearing (because no need) the static div and inserting a clearing div between float and static. This div is a lowly nothing, it has no height and nothing much else to collapse or not collapse: <http://netweaver.com.au/alt/martinPractical1.html> This gets FF on board, Camino too! Mac IE and iCab were quite the tramp on standards already so this is no different for them. But Safari holds out, as does Opera. So stronger measures still are needed if a bottom margin on the float is not to your taste or practical. Here is another couple to ponder: <http://netweaver.com.au/alt/martinPractical2.html> and <http://netweaver.com.au/alt/martinPractica13.html> The last is particularly interestig as it seems to trigger aquite a surprising thing in Opera: the mere mentioning in the css of a zero height for a clearing div is enough for Opera to suddenly think, ah, there is a 10px top border on a different static div Signaturedorayme [snip] > > Sample: > >http://www.ericmmartin.com/code/css/margin-float.html [quoted text clipped - 4 lines] > is not an easy read at all and there are quite some > complications. "not an easy read" - indeed =) > You will see how the essentials appear differently in different > browsers: [quoted text clipped - 8 lines] > > <http://netweaver.com.au/floatHouse/> Thanks...bookmarked! > But here are a couple of things to be considered: > > Let's try to be practical. You know about a bottom margin on a > float - that is easiest way to go probably. But suppose this is > not desirable for some reason. Mostly just me being stubborn and trying to understand "why". > How about not clearing (because no need) the static div and > inserting a clearing div between float and static. This div is a [quoted text clipped - 8 lines] > needed if a bottom margin on the float is not to your taste or > practical. A completely valid suggestion...I was stubbornly trying to avoid additional HTML markup ;) One thing I found interesting though, was that it seems to "work" in Safari 3 (Windows version). > Here is another couple to ponder: > [quoted text clipped - 8 lines] > zero height for a clearing div is enough for Opera to suddenly > think, ah, there is a 10px top border on a different static div I appreciate all of the samples. I still don't understand why it doesn't "work" as I expected, but I'm sure the details are in the specs that you referenced ;) It looks like I'll just use the margin-bottom solution as it prevents additional HTML. Thanks again for the insight! In article <ca58d0ca-15d5-4f8d-a3bc-d5cca6cc1771@n20g2000hsh.googlegroups.co m>, > [snip] > Thanks again for the insight! Well, actually, I should thank you as it has made me want to add to my little hobby on floats... The stuff on collapsing margins and floats is not something you will be wanting to take in as bedtime reading. You are right to be practical. If I am not mistaken, there seem to be at least two solutions to your problem, one we both agree on re the float margin, the other in one of my urls of last post that seems to make most browsers happy enough. There is one thing left to say, it is often the case that when you have a real job to carry out (rather than these pleasant enough reflections), many other ways to skin the cat present themselves. Signaturedorayme > In article ><ed3bc541-eb6d-4bdb-bb36-8b27c4f31bdb@1g2000hsl.googlegroups.com> [quoted text clipped - 25 lines] > and a good few less quids on IE7) you will have the 10px white > space of the body showing. They're wrong > But not on FF, Camino, Opera, Safari. They're getting it right. There should be no gap. Clear on a non-floated block moves the block down far enough for its top border to clear the floats above it, not for its top margin to clear them. [...] > How about not clearing (because no need) the static div and > inserting a clearing div between float and static. This div is a > lowly nothing, it has no height and nothing much else to collapse > or not collapse: > ><http://netweaver.com.au/alt/martinPractical1.html> Good idea. > This gets FF on board, Camino too! Mac IE and iCab were quite the > tramp on standards already so this is no different for them. But > Safari holds out, as does Opera. Opera is getting it wrong. The zero-height div should clear the float. The following div's 10px top margin does collapse with the top and bottom margins of the zero-height div (which are both 0), but the result of all that should be a 10px gap. > So stronger measures still are > needed if a bottom margin on the float is not to your taste or [quoted text clipped - 12 lines] > zero height for a clearing div is enough for Opera to suddenly > think, ah, there is a 10px top border on a different static div That is very strange. If you set height: auto in Opera you get no gap, but height: 0px and you get the gap. There is no justification for that that I can see. > > In article > ><ed3bc541-eb6d-4bdb-bb36-8b27c4f31bdb@1g2000hsl.googlegroups.com> > ><http://netweaver.com.au/alt/martinPractica13.html> > > [quoted text clipped - 6 lines] > but height: 0px and you get the gap. There is no justification for that > that I can see. Nor can I. This was so in Opera 9.24 for Mac. I have wondered if appears on Windows machines. Signaturedorayme >> > In article >> ><ed3bc541-eb6d-4bdb-bb36-8b27c4f31bdb@1g2000hsl.googlegroups.com> [quoted text clipped - 12 lines] > Nor can I. This was so in Opera 9.24 for Mac. I have wondered if > appears on Windows machines. I should think that part of the code is common to all platforms. I tried a simpler (or rather different) test. #one, #three { height: 200px; background-color: palegreen } #one { margin-bottom: 10px } #two { height: 0px } #three { margin-top: 10px } <div id="one"></div> <div id="two"></div> <div id="three"></div> One's bottom margin, two's top and bottom margins (both 0) and three's top margin should all collapse together resulting in 10px separating the two green boxes. But Opera leaves a 20px gap. But if you set #two to height: auto, it collapses across #two correctly. I tested this in 9.25 on GNU/Linux. The older version I had (8.50 I think) didn't collapse across the gap even with height: auto. It probably would be quite easy for them to fix. It's a different bug from the one you've found though. Whether or not you see the 10px in martinPractical3.html should not depend on whether margins collapse through the empty div or not. > >> > In article > >> ><ed3bc541-eb6d-4bdb-bb36-8b27c4f31bdb@1g2000hsl.googlegroups.com> [quoted text clipped - 41 lines] > you see the 10px in martinPractical3.html should not depend on whether > margins collapse through the empty div or not. I confirm what you found, I have no idea if it is a different bug, how do we count bugs? It looks at least rather similar in its effects to the one that makes: #one { float: left; height: 200px; background: palegreen; margin-bottom: 10px;} #two {clear: left; [... height auto or zero or no height at all...];} #three { height: 200px; background: palegreen; margin-top: 10px;} (to reintroduce the float into your example) behave similarly in Opera under the 3 conditions of 1. height:auto 2. height:0 3. no height spec at all for the the sandwiched div id="two". (You made a remark earlier about some prob OP was having that was unlikely to be about collapsing margins. I suspect you are right now. I just followed John's lead and could not see my way though the collapsing margin spec in its relevance and had meant to study it closer later. But a lot has more to do with how cleared elements are supposed to work. I thought I better mention this in case the OP was misled by me. I think he is a practical fellow anyway and will do something that suits. But I think I would have gone on to look at it in my post in much the same way anyway to search for a practical solution.) Signaturedorayme [...] >> I tried a simpler (or rather different) test. >> [quoted text clipped - 25 lines] > I confirm what you found, I have no idea if it is a different > bug, how do we count bugs? In general that's a difficult question. A programmer tends to count the number of fixes he does, a tester the number of things that fail. In this case though, they could fix the second bug and the first would still be there. If they fixed bug2, then it's reasonable to suppose you wouldn't get that 10px gap (in martinPractical3) with either height: 0 or with height: auto, but you ought to get it with either (this is bug1). Bug2 actually mitigates bug1. When you write height: 0 for the sandwich div, the two bugs cancel each other out and Opera apparently behaves correctly. But it's two wrongs making a "right". It's also possible that bug1 one isn't a bug at all. I think it is, but it's much more open to interpretation. Bug2 is definitely a bug. [snip] > (You made a remark earlier about some prob OP was having that was > unlikely to be about collapsing margins. I suspect you are right [quoted text clipped - 9 lines] > -- > dorayme No worries. I ended up using a margin-bottom one of the floated divs instead...but a clearing div was a good option as well. Besides wanting to figure out my issue, I wanted to understand why it was behaving the way it was. All of the responses have helped and I appreciate all of the input! > > In article > ><ed3bc541-eb6d-4bdb-bb36-8b27c4f31...@1g2000hsl.googlegroups.com> [quoted text clipped - 33 lines] > block moves the block down far enough for its top border to clear the > floats above it, not for its top margin to clear them. Interesting. It seems counter-intuitive to me ;) Is that specifically mentioned in the spec or is it derived from all of the different rules? I was looking at http://www.w3.org/TR/CSS21/visuren.html#propdef-clear but couldn't seem to find it. [snip] [...] >> ><http://netweaver.com.au/alt/martin.html> >> [quoted text clipped - 14 lines] > rules? I was looking at http://www.w3.org/TR/CSS21/visuren.html#propdef-clear > but couldn't seem to find it. It's right there in the definitions of "left", "right" and "both": left The clearance of the generated box is set to the amount necessary to place the top border edge below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document. "Bottom outer edge" means including the bottom margin. "Top border edge" means above the top of the border, but underneath the margin. See http://www.w3.org/TR/CSS21/box.html#box-dimensions for these definitions. > I have two div's that have float:left and a third that has clear:left > and margin-top:10px. In IE 6 & 7, it displays as I intended, but in [quoted text clipped - 6 lines] > Sample: > http://www.ericmmartin.com/code/css/margin-float.html Now that you've had your lesson on floats, what to do? You could could put the first two floated divs in a div wrapper. That way the third div would just be looking at setting a margin against the bottom of that wrapper div. You could also add a clearing div after the floats with a style of clear: both. Either way you are breaking the desire to float to the highest level. Dorayme has a page on box height of divs with floated children you may wish to look over. Jeff > I have two div's that have float:left and a third that has clear:left > and margin-top:10px. In IE 6 & 7, it displays as I intended, but in [quoted text clipped - 6 lines] > Sample: > http://www.ericmmartin.com/code/css/margin-float.html Firefox appears to not honor the clear:left; in: #three {width:400px; clear:left; background:#aaa; margin-top:10px;} Remove the clear:left; in the above stylesheet rule and in the markup immediately before <div id="three"> add a clearing div as: <div style="clear:left;height:auto; width:auto;"></div> or <div style="clear:left;height:0; width:0;"></div> The margin-top will then be honored by Firefox and by Safari. Opera does not like the former at all, but honors the latter. IE enjoys the former better than the latter. SignatureGus >> I have two div's that have float:left and a third that has clear:left >> and margin-top:10px. In IE 6 & 7, it displays as I intended, but in [quoted text clipped - 9 lines] > Firefox appears to not honor the clear:left; in: > #three {width:400px; clear:left; background:#aaa; margin-top:10px;} It does honour the clear:left, and it is correct: you shouldn't see a 10px gap between #three and the float. > Remove the clear:left; in the above stylesheet rule and > in the markup immediately before <div id="three"> add a clearing div as: [quoted text clipped - 3 lines] > > The margin-top will then be honored by Firefox and by Safari. Now the margin-top is between #three and the clearing div, which is below the float, so you see the margin. > Opera does not like the former at all, but honors the latter. Yes this is the bug(s) I have been discussing with dorayme. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.