Margins disappear inside container

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Margins disappear inside container

Post 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?)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

viewtopic.php?t=36868 has a pretty good discussion of the "issue" and the standards involved.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

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