Re: [css-d] Streching Divs around Floated Divs
Georg Srtun wrote: Using 'overflow:auto/hidden' for containing floats is a lot of fun, and in many cases it'll actually work. However, it is not a reliable solution, and has to be tested to death across browser-land - in each case. So, I use it (at my own risk) - but I won't recommend it for anything but the simplest cases. Georg, thanks for relieving my headaches. In the end, we'll have another float clearing method with some hacks for IEMac, IE/Win5.5, 6, Opera8, and more. Oh, and IE7. Just business a usual. Or the return of the solid clearer. It's really complex, that spiral. Ingo __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Streching Divs around Floated Divs
Ingo Chao wrote: Georg Srtun wrote: Using 'overflow:auto/hidden' for containing floats is a lot of fun, and in many cases it'll actually work. However, it is not a reliable solution, and has to be tested to death across browser-land - in each case. So, I use it (at my own risk) - but I won't recommend it for anything but the simplest cases. Georg, thanks for relieving my headaches. You're welcome ;-) In the end, we'll have another float clearing method with some hacks for IEMac, IE/Win5.5, 6, Opera8, and more. Oh, and IE7. IE7 will probably solve itself (more or less) - in quirks mode. Opera, Firefox and Safari are more problematic, as none of them are predictable and stable when given complex layouts. They cut too many corners, and they don't cut the same corners. Just business a usual. That's the fun part... :-) Or the return of the solid clearer. It's really complex, that spiral. Well, yes, it is complex, and hacking around in that mess only makes it worse. Clearing stuff isn't really a problem, but one sure need to know ones way around these browser-specific solutions before releasing problem-solvers into the wild for others to use. Simple test-cases just won't do--unless that's all we'll ever create. Using a *solid clearer* is often the only cross-browser reliable solution - as long as any HasLayout hacks for IE/win are used in a controlled way. Guess that's why I keep the old br / styled as clearer in all my stylesheets--regardless of all the smart solutions that pops up everywhere. However, one can mess up with *solid clearers* too. The closest thing I have found for reliable float-containment is 'floats expands to contain floats'. That one usually only require some minor fixes for IE (win Mac). However, I'm sure someone know how to mess up that one across browser-land too. My general recommendation is: - avoid using CSS-definitions for something they are not *clearly* created for--unless you know exactly what you're doing and how each browser will handle it. - think twice about methods that'll need hacks across browser-land in order to work--unless such hacks are for IE/win only. - don't rely on any browser's handling of anything as the right way--unless it is _perfectly_ in line with the text in the latest revision of the relevant standard. - expect unclear statements in any W3C-standard to be changed in a later revision. Standards rely on actual implementation across browser-land, since W3C can't force any browser to implement anything. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Streching Divs around Floated Divs
Ingo Chao wrote: Big John schrieb: Combine this with the rules for overflow:auto: The day I read about this link in Anne's reply to Roger, and all nodded, I felt like left alone in the dark (not that this is not common to me). Nothing to worry about... the theory can be messed up in a dozen ways just by reading some more from the standards. Not to mention what isn't written there, and all that is left to the browser-vendors to decide upon. CSS sure is fun. ;-) And in praxi: ...see the browsers go crazy :-) ... And a negative margined float will cause a horizontal scrollbar (:auto) in Moz/Opera by expanding the container horizontally, or is gone (:hidden) in Opera. Opera 8 may expand containers to contain floats with a full-height negative margin-bottom - which it shouldn't (I think). Other browsers handles that one just fine. Add in some standard positioning on surrounding elements, and see Firefox loose stability in positioning and go crazy. Other browsers I've tested handles those cases just fine. BTW: responded to another float-containment problem today, and 'overflow:hidden' worked fine in Opera - but sent the whole container off the page in Firefox. Couldn't find anything about that in the standards, so I may have to read some more... Ended up using 'floats to contain floats'. To me, it's not that super simple. I agree 100%. Using 'overflow:auto/hidden' for containing floats is a lot of fun, and in many cases it'll actually work. However, it is not a reliable solution, and has to be tested to death across browser-land - in each case. So, I use it (at my own risk) - but I won't recommend it for anything but the simplest cases. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Streching Divs around Floated Divs
I recently posted a problem where I had a div that wasn't stretching around the two floated divs that were within a parent div. I was helped to understand that the parent div will have no actual height since floats are designed to exist outside of their parent divs. This wouldn't make sense at first glance, but when you think about it, it is exactly what most of us would expect a float to do - Read More here: http://complexspiral.com/publications/containing-floats/. I was pointed to a solution to give the parent div a overflow attribute with the values of auto, hidden, or scroll. I tried this solution and it worked, but I do not understand why. The article I was pointed to was http://www.quirksmode.org/css/clearing.html, and it seems as though the author was unsure as to why it worked. Does anyone know exactly what is going on here? Thanks, Tim Zappe www.tzappe.com http://www.tzappe.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Streching Divs around Floated Divs
Tim Zappe wrote: I recently posted a problem where I had a div that wasn't stretching around the two floated divs that were within a parent div.-snip- I was pointed to a solution to give the parent div a overflow attribute with the values of auto, hidden, or scroll. I tried this solution and it worked, but I do not understand why.-snip- Does anyone know exactly what is going on here? Here are the relevant citations: http://www.w3.org/TR/2004/CR-CSS21-20040225/visudet.html#root-height if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Combine this with the rules for overflow:auto: http://www.w3.org/TR/2004/CR-CSS21-20040225/visufx.html#x0 The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes. As I see it, a float that is inside a container can overflow that container, so overflow:auto would cause such a float to create a scrollbar, unless there is no assigned height on the container. If the container has height:auto then it is free to get taller when non-floated content is tall. So the overflow:auto rule can either create a scroll for the tall float or add height to the container. Apparently the consensus is to enlarge the container rather than do the scrollbar thing. Big John -- Perennial student + Impractical joker + CSS junkie = Big John http://www.positioniseverything.net __ Discover Yahoo! Stay in touch with email, IM, photo sharing and more. Check it out! http://discover.yahoo.com/stayintouch.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
