Exactly. The magic confounds me. http://staff.washington.edu/jtate/overflow.html
(I threw together the above example quickly. (Yes, embedded styles are a no-non, but it was easy to do in this situation.) Thanks a ton for the quirksmode link. It helps demystify the mystery. -jody On Feb 10, 2010, at 1:42 PM, akella wrote: > Apparently he is talking about overflow:hidden as a clearing floats fix. > (http://www.quirksmode.org/css/clearing.html) > Let me reformulate the question: why the property that serves for hiding smth > just make the wrapper stretch to accomodate containing floats. > As for me - i still consider this magic. May be W3C got smth on this topic. > > > Yuriy "akella" Artyukh, > http://cssing.org.ua > > > > On Wed, Feb 10, 2010 at 9:32 PM, Christian Snodgrass > <csnodgrass3...@gmail.com> wrote: > I'm not sure I understand what you're asking. Could you put together a quick > example to illustrate. > > Basically what overflow: hidden does is anything that doesn't fit into it's > given container is hidden, basically meaning that it doesn't affect the > height of it's container. This only works if the parent has a height set. If > it doesn't, overflow: hidden has absolutely no effect. > > Here is an example: http://www.arwebdesign.net/test2.html > > In the first one, the container has a static height (500px) and no overflow. > The text just streams right out of the container. > In the second one, the container still has a static height, but has overflow: > hidden. This time, the text just disappears. > In the third one, the container has no height set, but has overflow: hidden. > This time, the container's height stretches to accommodate it's contents. > In the fourth one, the container has no height set and has no overflow. This > functions exactly the same as the third. Overflow hidden had no effect on the > third one without a height being set. > > Hope that clarifies overflow: hidden a bit. > > - Christian > > > On 2/10/2010 1:50 PM, Jody Tate wrote: > (I'm a list lurker. Also, apologies if this has been covered before.) > > In CSS, setting a div to "overflow: hidden" solves a problem it shouldn't--at > least from the name of the property and value, it seems like it shouldn't. > > Often I'll have text, e.g. an h1, overflowing its containing/parent div, but > setting the containing/parent div to "overflow: hidden" causes the parent div > to set its height in a way that the formerly overflowing text no longer > overflows. > > I've seen this happen for years. Another developer showed me this fix years > ago. But over the years, I've never read an explanation why "overflow: > hidden" fixes a problem its name implies it wouldn't. > > Have others seen this? Any explanations? > > -jody > > > > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: memberh...@webstandardsgroup.org > ******************************************************************* > > > > > > -- > Christian Snodgrass > CEO - Azure Ronin > http://www.arwebdesign.net > http://www.htmlblox.com > Phone: 859.816.7955 > > > > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: memberh...@webstandardsgroup.org > ******************************************************************* > > > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: memberh...@webstandardsgroup.org > ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
