'margin-top' Oddity

Cool Guy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<div style="height: 100px; width: 100px; background-color: red;">
<div style="height: 50px;
margin-top: 50px;
background-color: blue">
</div>
</div>
</body>
</html>

Now, with this I'd expect to see 100 vertical pixels of red followed by 100
vertical pixels of blue - and this *is* what I see in IE. However in
Firefox I see 100 vertical pixels of white followed by 100 vertical pixels
of blue followed by 100 vertical pixels of red.

Any idea of what's up?

Oct 9 '05 #1

Follow Post Reply

1850

Els

Cool Guy wrote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<div style="height: 100px; width: 100px; background-color: red;">
<div style="height: 50px;
margin-top: 50px;
background-color: blue">
</div>
</div>
</body>
</html>

Now, with this I'd expect to see 100 vertical pixels of red followed by 100
vertical pixels of blue - and this *is* what I see in IE. However in
Firefox I see 100 vertical pixels of white followed by 100 vertical pixels
of blue followed by 100 vertical pixels of red.

Any idea of what's up?

Personally, I'd expect 50px of red, and 50px of blue.
Are you sure the above is an exact copy paste of your actual example?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vÃ£o. O resto Ã© imperfeito.
- Renato Russo -

Oct 9 '05 #2

Cool Guy

I wrote:

Any idea of what's up?

Okay, I've played with this a little and found that giving the outer div
'float: left' fixes this in Firefox. Does anyone know why?

Oct 9 '05 #3

Els

Cool Guy wrote:

I wrote:
Any idea of what's up?

Okay, I've played with this a little and found that giving the outer div
'float: left' fixes this in Firefox. Does anyone know why?

There's another way of fixing it: give the outer div a border.
It's the margin on the inner div, that's going outside the outer div,
unless it has a border. I guess floating has the same effect, as it
makes the div positioned. Not exactly sure how it works though.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vÃ£o. O resto Ã© imperfeito.
- Renato Russo -

Oct 9 '05 #4

Cool Guy

Els <el*********@tiscali.nl> wrote:

Personally, I'd expect 50px of red, and 50px of blue.

You're right - I mixed it up. Sorry.

Oct 9 '05 #5

Cool Guy

Els <el*********@tiscali.nl>:

Okay, I've played with this a little and found that giving the outer div
'float: left' fixes this in Firefox. Does anyone know why?

There's another way of fixing it: give the outer div a border.
It's the margin on the inner div, that's going outside the outer div,
unless it has a border. I guess floating has the same effect, as it
makes the div positioned. Not exactly sure how it works though.

Just to add: Opera needs the floating or the border, too. Otherwise it
displays it like Firefox.

Oct 9 '05 #6

Els

Cool Guy wrote:

Els <el*********@tiscali.nl>:
Okay, I've played with this a little and found that giving the outer div
'float: left' fixes this in Firefox. Does anyone know why?

There's another way of fixing it: give the outer div a border.
It's the margin on the inner div, that's going outside the outer div,
unless it has a border. I guess floating has the same effect, as it
makes the div positioned. Not exactly sure how it works though.

Just to add: Opera needs the floating or the border, too. Otherwise it
displays it like Firefox.

Yup, knew that :-)
When Opera and Firefox do the same thing while IE is not, usually it's
safe to say IE is wrong. Haven't checked the specs on this though.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vÃ£o. O resto Ã© imperfeito.
- Renato Russo -
Now playing: Jon Bon Jovi - Knockin On Heavens Door (acoustic)

Oct 9 '05 #7

Gus Richter

Cool Guy wrote:

I wrote:

Any idea of what's up?

Okay, I've played with this a little and found that giving the outer div
'float: left' fixes this in Firefox. Does anyone know why?

This is due to collapsing margins, which basically says that when two
vertical margins meet up (are adjacent), instead of adding together the
largest margin takes precedent and the other one collapses to nothing.
Note that margins are no longer adjacent if a border or padding is used,
if relative or absolute positioned, if floated, or if another element is
between the two Margins.

--
Gus

Oct 9 '05 #8

Cool Guy

Gus Richter <gu********@netscape.net> wrote:

Hi. I don't quite understand your reply...

This is due to collapsing margins, which basically says that when two
vertical margins meet up (are adjacent),
Which two margins are meeting up? Isn't there's only one margin here? In
any case setting 'margin: 0;' for 'body' has no effect.
[...]

Oct 9 '05 #9

Els

Cool Guy wrote:

Gus Richter <gu********@netscape.net> wrote:

Hi. I don't quite understand your reply...
This is due to collapsing margins, which basically says that when two
vertical margins meet up (are adjacent),

Which two margins are meeting up? Isn't there's only one margin here? In
any case setting 'margin: 0;' for 'body' has no effect.

The margins for the outer div and the inner div.
(both top margins in this case)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vÃ£o. O resto Ã© imperfeito.
- Renato Russo -

Oct 9 '05 #10

Cool Guy

Els <el*********@tiscali.nl>:

This is due to collapsing margins, which basically says that when two
vertical margins meet up (are adjacent),

Which two margins are meeting up? Isn't there's only one margin here? In
any case setting 'margin: 0;' for 'body' has no effect.

The margins for the outer div and the inner div.
(both top margins in this case)

But the outer div doesn't have a margin, does it? And anyway if I give it a
margin of 0 nothing changes. I'm confuzzled. :(

Oct 10 '05 #11

Els

Cool Guy wrote:

Els <el*********@tiscali.nl>:
This is due to collapsing margins, which basically says that when two
vertical margins meet up (are adjacent),

Which two margins are meeting up? Isn't there's only one margin here? In
any case setting 'margin: 0;' for 'body' has no effect.

The margins for the outer div and the inner div.
(both top margins in this case)

But the outer div doesn't have a margin, does it? And anyway if I give it a
margin of 0 nothing changes. I'm confuzzled. :(

A margin of 0 on the outer div, and a margin of 50px on the inner div.
They collapse into one margin of 50px. Unless you add a border or
padding or float or position the outer div. Then the two margins
aren't adjacent anymore, and won't collapse anymore.

I agree it does take a slight mind bend to understand it though ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vÃ£o. O resto Ã© imperfeito.
- Renato Russo -

Oct 10 '05 #12

Cool Guy

Els <el*********@tiscali.nl> wrote:

But the outer div doesn't have a margin, does it? And anyway if I give it a
margin of 0 nothing changes. I'm confuzzled. :(

A margin of 0 on the outer div, and a margin of 50px on the inner div.
They collapse into one margin of 50px. Unless you add a border or
padding or float or position the outer div. Then the two margins
aren't adjacent anymore, and won't collapse anymore.

Hmm. What's the rationale of this?

Oct 10 '05 #13

Els

Cool Guy wrote:

Els <el*********@tiscali.nl> wrote:
But the outer div doesn't have a margin, does it? And anyway if I give it a
margin of 0 nothing changes. I'm confuzzled. :(

A margin of 0 on the outer div, and a margin of 50px on the inner div.
They collapse into one margin of 50px. Unless you add a border or
padding or float or position the outer div. Then the two margins
aren't adjacent anymore, and won't collapse anymore.

Hmm. What's the rationale of this?

You'd have to ask the people over at W3c I think.
I don't find it too weird though - if the two elements would not be
nested, I think you would see how collapsing margins are logical. I
see it like two people who keep each other at arm's length.
If one's arm is 75cm long, and the other person's arm's 60cm long, the
distance between the two would be 75cm, not 135cm.

The weird part (imo) only happens when the two elements are nested.
The rules remain the same, it only /appears/ less logical.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vÃ£o. O resto Ã© imperfeito.
- Renato Russo -

Oct 10 '05 #14

This discussion thread is closed

Similar topics