Re: [WSG] the mysteries of overflow: hidden

[Rajib Mukherji]

overflow:hidden simply suggests that whetever text/image  if overflows  will be 
automatically get hidden and hence the case. So read it like if something 
overflows it should  be hidden :)

--- On Thu, 2/11/10, Jody Tate  wrote:


From: Jody Tate 
Subject: [WSG] the mysteries of overflow: hidden
To: "wsg@webstandardsgroup.org" 
Date: Thursday, February 11, 2010, 12:20 AM


(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
***




  

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] the mysteries of overflow: hidden

[Thierry Koblentz]

> From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
> On Behalf Of Jody Tate
> Sent: Wednesday, February 10, 2010 2:05 PM
> To: wsg@webstandardsgroup.org
> Subject: Re: [WSG] the mysteries of overflow: hidden
> 
> 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.)

What overflow does is that it creates a "block formatting context". Any
value besides "visible" will work.
I wrote something about containing floats without structural markup [1].
Check the demo page [2] to see how various techniques work and how
triggering hasLayout is very similar to creating a block formatting context.
This technique can even be used as a tool to create robust layouts [3].

[1]
http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.a
sp
[2] http://tjkdesign.com/articles/block-formatting_context/newBFC.asp
[3] http://www.ez-css.org

--
Regards,
Thierry | www.tjkdesign.com




 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] the mysteries of overflow: hidden

[Jody Tate]

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 
>  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
***

Re: [WSG] the mysteries of overflow: hidden

[Christian Snodgrass]

Ah, that.

Yeah... magic.

I think that is actually a sort of bug or artifact that occurs from the 
need to calculate the dimensions of the container in order to hide properly.


- Christian

On 2/10/2010 4: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 
mailto: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
*** 



--
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
***

Re: [WSG] the mysteries of overflow: hidden

[akella]

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
***

Re: [WSG] the mysteries of overflow: hidden - ADMIN

[Russ Weakley]

My apologies all. This charming individual has been removed from the  
list.


No need to comment on this and add unwanted noise to the list...

As you were.

Thanks
russ



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] the mysteries of overflow: hidden

[Dj Tebbo]

 
fuck off sendin me shit
  
_
We want to hear all your funny, exciting and crazy Hotmail stories. Tell us now
http://clk.atdmt.com/UKM/go/195013117/direct/01/

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] the mysteries of overflow: hidden

[Christian Snodgrass]

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
***

Re: [WSG] the mysteries of overflow: hidden

[Joseph Taylor]

If I understand correctly, you're suggesting that that "overflow:hidden" 
doesn't hide overflow?


My own use of "overflow:hidden" has only been in conjunction with a 
stated height. In this case "overflow:hidden" hides anything that goes 
beyond the stated height of the element the rule has been attached to.


Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 2/10/10 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
***

   



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

[WSG] the mysteries of overflow: hidden

[Jody Tate]

(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
***