On Jul 8, 2011, at 9:39 AM, Venditelli, Daniel - Web Development Administrator wrote:
> I've stumbled upon an issue with clearing floats that I feel like I've > done before but for the life of me cannot figure out today. I'm either > too close, too tired, too low on caffeine or getting a bit senile and > misinterpreting the CSS box model and sibling relationships. You forgot to blame the weather :) > > In the linked example, I would like "paragraph 2" to clear just the > "floating content" in the white block as it does in IE 7, NOT the > "Green-ish Container" as it is currently doing in both Chrome 12 and > Firefox 4. > > - http://www.ci.yuma.az.us/share/TEST-float-quirks.htm > ... > Is it really proper for the child to clear not only it's own siblings > but also any parent's sibling's child as well? Yes, in this case. See http://www.w3.org/TR/CSS21/visuren.html#flow-control [quote] The 'clear' property does not consider floats inside the element itself or in other block formatting contexts. [/quote] In your case, the 'Green-ish Container' is in the same block formatting context as the 'Blueish Container'. It 'works' as your would like (parag2 positioned just below the white floated box) in IE7 & 6 because that hellish thing called 'hasLayout' - you set a width on the parent cyan blue box, width triggers 'hasLayout'; 'hasLayout' establishes a (new) block formatting context [1]. To solution is to isolate the 'Blueish Container' from the 'Green-ish Container' by having 'Blueish Container' become a new block formatting context. 9.4.1 lists properties that establish a new block formatting context. http://www.w3.org/TR/CSS21/visuren.html#block-formatting [1] http://www.satzansatz.de/cssd/onhavinglayout.html Philippe -- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
