Page 1 of 1

Margins disappear inside container

Posted: Sun Aug 28, 2005 2:13 pm
by Ambush Commander
This is really, really weird.

Code: Select all

<div><div style="font-size:2em;font-weight:bold;margin:.67em auto;">Content</div></div>
I'd expect there'd be a margin between the parent div and the child div right? Well, no such margin. The DIV boxes are basically occupying the same space in both IE and Mozilla. If you, however, float the parent DIV, the margin appears. If you add a border, the margin appears.

Where does this strange behavior come from? I've searched and searched, and I've not found one iota of information from the CSS2.1 spec, the Mozilla bug database, or the web!

This is really annoying because when I emulate tables with CSS, if I use margin-top and margin-bottom, they magically disappear for the non-floated one and magically appear for the floated one. So, I end up having to set both margins to 0 and making the division appear elsewhere. Why doesn't the CSS spec document this (or if it does, where?)

Posted: Sun Aug 28, 2005 2:56 pm
by feyd
viewtopic.php?t=36868 has a pretty good discussion of the "issue" and the standards involved.

Posted: Sun Aug 28, 2005 3:03 pm
by Ambush Commander
Thank you for the link. Guess I should've searched here, huh.

Maybe I'll write a tutorial on this or something.