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

Floated elements are taken out of the normal flow and are therefore not counted as occupying any height.
To fix that, you can add an empty element after the float with clear:both. The clearing element is a regular element that is in the flow, and the clear property forces it below the floated element.
Therefore, the containing box will expand to contain the clearing element, and will coincidentally also contain the float.

For more information, see the spec:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

Answer 2

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 )

Answer 3

• Eric Meyer's CSS: The Definitive Guide is a good reference. It's old, but the box model hasn't changed.
• quirksmode has good explanations of browser-specific behaviour.
• for example #2, you can either add <div style="clear: both;"></div> after the second black block or and height and width to the container <div>

Answer 4

Regarding your first question, here's my favorite method for clearing floats in a container without empty elements: http://www.quirksmode.org/css/clearing.html

Answer 5

I find Chris Coyier's articles well-written and easy to understand. He has a section on Core Concepts, including topics like Floats and the Box Model

Hope this helps, JD