margin-top and div floats

#11

On 2008-01-25, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

Quote:

In article <slrnfpjhmg.i9u.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-01-25, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article
ed3bc541-eb6d-4bdb-bb36-8b27c4f31bdb...oglegroups.com

http://netweaver.com.au/alt/martinPractica13.html

The last is particularly interesting as it seems to trigger quite
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

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.

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.

#12

In article <slrnfpkobn.q5a.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

Quote:

On 2008-01-25, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <slrnfpjhmg.i9u.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-01-25, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article
ed3bc541-eb6d-4bdb-bb36-8b27c4f31bdb...oglegroups.com

http://netweaver.com.au/alt/martinPractica13.html

The last is particularly interesting as it seems to trigger quite
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

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.

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.

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.)

--
dorayme

#13

On 2008-01-25, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

Quote:

In article <slrnfpkobn.q5a.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:
[...]
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.

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.

#14

Eric Martin wrote:

Quote:

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

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.

--
Gus

#15

On Jan 25, 3:23 am, Ben C <spams... (AT) spam (DOT) eggs> wrote:

Quote:

On 2008-01-25, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
ed3bc541-eb6d-4bdb-bb36-8b27c4f31... (AT) 1g2000hsl (DOT) googlegroups.com
,
Eric Martin <emarti... (AT) gmail (DOT) com> 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
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

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.

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.

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]

#16

[snip]

Quote:

(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.)

--
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!

#17

On 2008-01-26, Eric Martin <emartin24 (AT) gmail (DOT) com> wrote:

Quote:

On Jan 25, 3:23 am, Ben C <spams... (AT) spam (DOT) eggs> wrote:
On 2008-01-25, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
[...]
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.

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.

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.

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.

#18

On 2008-01-26, Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

Quote:

Eric Martin 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
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

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.

Quote:

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.

Now the margin-top is between #three and the clearing div, which is
below the float, so you see the margin.

Quote:

Opera does not like the former at all, but honors the latter.

Yes this is the bug(s) I have been discussing with dorayme.