learn how containers work in css

Question

I'm a programmer trying to do some patching up in web-design and generally find css very logical. So far, only 'boxing model' remains a magical land full of minotaurs and harpies for me. I'll illustrate it with examples:

• http://jsfiddle.net/qyMxv/
  The inner element of div with padding specified goes outside of div space. Isn't div supposed to enclose everything inside it? What's the point of doing otherwise?

• http://jsfiddle.net/wk9Kg/
  Parent div completely disappears, while children are shown normally. Even more strange that this behaviour is triggered by float:left;.

Is there any tutorial/reference book which could help me to see logic in these quirks? I trusted w3schools for some time but they're terribly brief on this subject. Finding good content on the web also turned out to be difficult. Right now I just fiddle with display, position and float properties until it works.

Thanks!

Answer 1

1. Generally the div is supposed to enclose/contain any relatively or staticly positioned, non-floated element inside but you can get away with padding on the inline element as you have it, or with negative margins/negative values with position relative. This allows for more flexible layouts I suppose.

2. Floats aren't supposed to be contained as they are out of flow, unless you have an element clearing afterwards, or overflow set to anything other than visible. In IE7/IE6 you just need to trigger hasLayout which can be done through numerous property/value combos ( this goes against the spec ). See http://work.arounds.org/clearing-floats/ for ways to make it clear the float(s) inside.

Here's a list of sites for cross-browser bugs that I compiled from another question:

• http://www.brunildo.org/test/

• http://www.gtalbot.org/BrowserBugsSection/

• http://www.quirksmode.org/

• http://www.quirksmode.org/bugreports/

• http://www.positioniseverything.net/

• http://reference.sitepoint.com/css

• http://www.richinstyle.com/bugs/

• http://haslayout.net/

• http://css-discuss.incutio.com/wiki/Main_Page

• http://channel9.msdn.com/wiki/wiki/InternetExplorerSupportForCSS/

• http://samples.msdn.microsoft.com/ietestcenter/

• http://channel9.msdn.com/wiki/wiki/InternetExplorerBugs/

• http://css-class.com/test/bugs/ie/ie-bugs.htm

• http://perfectionkills.com/category/cft/

• http://api.jquery.com/jQuery.support/

• http://www.css-lab.com/

• http://www.iecss.com/ ( Jonathan Neal's roundup of default IE styles )

• http://work.arounds.org/ ( This is the actual super archive site I'm working on )