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

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

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 (AT) n20g2000hsh (DOT) 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.
--
John
Remembering the UIP: http://improve-usenet.org/

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

--
dorayme

On Jan 24, 5:00 pm, John Hosking <J... (AT) DELETE (DOT) Hosking.name.INVALID>
wrote:

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

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.

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... (AT) n20g2000hsh (DOT) 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, 8:26 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

[snip]

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.

"not an easy read" - indeed =)

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/

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

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:

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

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 (AT) n20g2000hsh (DOT) googlegroups.co
m>,
Eric Martin <emartin24 (AT) gmail (DOT) com> wrote:

On Jan 24, 8:26 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

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

--
dorayme

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

On Jan 24, 5:00 pm, John Hosking <J... (AT) DELETE (DOT) 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/com...64c0c59f491719

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.

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

In article
ed3bc541-eb6d-4bdb-bb36-8b27c4f31bdb...oglegroups.com
,
Eric Martin <emartin24 (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.

[...]

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

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.

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

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

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.

--
dorayme