Outer div not honoring inner div margin unless border is supplied (I'm confused)

Browsers affected: IE6, IE7, FireFox 2.x, Safari

Because all of the browsers are rendering this the same way, I tend to
believe it's not a bug but rather I just "don't know the rules" for
how things are supposed to be rendered.

The problem is that an child (inner) div's margin is ignored if there
is nothing in its parent (outer) div other than itself. If the parent
div has a border applied, suddenly the margins are rendered. Why is
this? Once again, there must be a reason since all browsers are doing
it. Please, help me understand!

Here's a VERY simple page that illustrates my issue:
http://dev.digitolle.net/test/cssidiocy.htm

In article
<1186447705.670631.12260 (AT) e9g2000prf (DOT) googlegroups.com>,
Shadow Lynx <shdwlynxjunk (AT) yahoo (DOT) com> wrote:

Browsers affected: IE6, IE7, FireFox 2.x, Safari

Because all of the browsers are rendering this the same way, I tend to
believe it's not a bug but rather I just "don't know the rules" for
how things are supposed to be rendered.

The problem is that an child (inner) div's margin is ignored if there
is nothing in its parent (outer) div other than itself. If the parent
div has a border applied, suddenly the margins are rendered. Why is
this? Once again, there must be a reason since all browsers are doing
it. Please, help me understand!

Here's a VERY simple page that illustrates my issue:
http://dev.digitolle.net/test/cssidiocy.htm

To see better what is going on, try adding to your .outer a bit:

background-color: red;
border: 100px solid green;

--
dorayme

Shadow Lynx wrote:

Browsers affected: IE6, IE7, FireFox 2.x, Safari

Because all of the browsers are rendering this the same way, I tend to
believe it's not a bug but rather I just "don't know the rules" for
how things are supposed to be rendered.

The problem is that an child (inner) div's margin is ignored if there
is nothing in its parent (outer) div other than itself. If the parent
div has a border applied, suddenly the margins are rendered. Why is
this? Once again, there must be a reason since all browsers are doing
it. Please, help me understand!

Here's a VERY simple page that illustrates my issue:
http://dev.digitolle.net/test/cssidiocy.htm

See in the Specifications regarding "collapsing margins":

<http://www.w3.org/TR/CSS21/box.html#collapsing-margins>
<http://www.w3.org/TR/CSS21/box.html#mpb-examples>

URL's which explain the why and wherefore of "collapsing margins".

CSS - Auto-height and margin-collapsing

<http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php>
No Margin For Error
<http://www.andybudd.com/archives/2003/11/no_margin_for_error/index.php>
Uncollapsing Margins
<http://www.complexspiral.com/publications/uncollapsing-margins/>

An easy way to confirm if a problem is due to collapsing margins is to
include this temporarily in your stylesheet:
* {margin:0 !important;}

--
Gus

On Aug 6, 8:59 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
1186447705.670631.12... (AT) e9g2000prf (DOT) googlegroups.com>,
Shadow Lynx <shdwlynxj... (AT) yahoo (DOT) com> wrote:

Browsers affected: IE6, IE7, FireFox 2.x, Safari

Because all of the browsers are rendering this the same way, I tend to
believe it's not a bug but rather I just "don't know the rules" for
how things are supposed to be rendered.

The problem is that an child (inner) div's margin is ignored if there
is nothing in its parent (outer) div other than itself. If the parent
div has a border applied, suddenly the margins are rendered. Why is
this? Once again, there must be a reason since all browsers are doing
it. Please, help me understand!

Here's a VERY simple page that illustrates my issue:
http://dev.digitolle.net/test/cssidiocy.htm

To see better what is going on, try adding to your .outer a bit:

background-color: red;
border: 100px solid green;

--
dorayme

There is a background already and adding a border uncollapses the
margins (and although I could add a border in this case, it doesn't
work for layouts with image backgrounds, etc.)

On Aug 6, 9:07 pm, Gus Richter <gusrich... (AT) netscape (DOT) net> wrote:

Shadow Lynx wrote:
Browsers affected: IE6, IE7, FireFox 2.x, Safari

Because all of the browsers are rendering this the same way, I tend to
believe it's not a bug but rather I just "don't know the rules" for
how things are supposed to be rendered.

The problem is that an child (inner) div's margin is ignored if there
is nothing in its parent (outer) div other than itself. If the parent
div has a border applied, suddenly the margins are rendered. Why is
this? Once again, there must be a reason since all browsers are doing
it. Please, help me understand!

Here's a VERY simple page that illustrates my issue:
http://dev.digitolle.net/test/cssidiocy.htm

See in the Specifications regarding "collapsing margins":

http://www.w3.org/TR/CSS21/box.html#collapsing-margins
http://www.w3.org/TR/CSS21/box.html#mpb-examples

URL's which explain the why and wherefore of "collapsing margins".

CSS - Auto-height and margin-collapsing

http://www.researchkitchen.de/blog/a...ght-and-margin...
No Margin For Error
http://www.andybudd.com/archives/200...rror/index.php
Uncollapsing Margins
http://www.complexspiral.com/publica...psing-margins/

An easy way to confirm if a problem is due to collapsing margins is to
include this temporarily in your stylesheet:
* {margin:0 !important;}

--
Gus

Thanks, Gus. The ComplexSpiral link explained it, and if I had more
patience, I'd read the specs. (o; Really, though, I think there
should be some kind of "margin-collapse: no-collapse" type of property
(rather than requiring a border or padding to force the uncollapsing
of the margins.) Although collapsing works for some situations, it
makes position layout with pure CSS absolute hell (I'm trying to stop
using tables, but things like this make me tear my hair out!)