Re: [css-d] Issue with clearing nested floats.
Philippe, David, Thanks. Overflow - hidden solved THAT issue in the working page. We'll see if I can break anything else tonight. ;) Thanks again and have a great evening, Daniel -Original Message- From: Philippe Wittenbergh [mailto:e...@l-c-n.com] Sent: Thursday, July 07, 2011 6:12 PM To: Venditelli, Daniel - Web Development Administrator Cc: css-d Subject: Re: [css-d] Issue with clearing nested floats. 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/
Re: [css-d] Issue with clearing nested floats.
On 7/7/11 5:39 PM, Venditelli, Daniel - Web Development Administrator wrote: It's been one of those days... 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. 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 As you can see, I've stripped this down as much as I can to make sure none of the hullaballoo* in my working project is causing the issue. [...] Appreciated. :) For this to work, the DIV with 50em width needs to establish it's own block formatting context. IE 6 & 7 effectively do this with the explicit width declaration.[1] You'll get the same result in real browsers by adding an "overflow" value of any value different from the default "visible." I added this: overflow: hidden: Hope this works in your actual page. [1] http://www.satzansatz.de/cssd/onhavinglayout.html -- Cordially, David __ 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/
Re: [css-d] Issue with clearing nested floats.
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/
[css-d] Issue with clearing nested floats.
It's been one of those days... 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. 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 As you can see, I've stripped this down as much as I can to make sure none of the hullaballoo* in my working project is causing the issue. * Adding "position:absolute" to the "Green-ish Container" div solves the problem for Chrome and Firefox but causes overlaps in IE. * Adding "position:absolute" to BOTH the "Green-ish Container" div AND the "Blue-ish Container" div solves the float issue in all three browsers but causes the surrounding box to collapse down to just wrapping the header, the only thing not positioned absolutely. 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? Thank you, Daniel * of course I am referring to noise and chatter here NOT the British Invasion band from the 60's - I can't see why they would want anything to with my project in it's current state. --- All opinions and musical preferences expressed here are my own and not representative of my employer. __ 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/
