[css-d] Is overflow:hidden the best?
Hi, all What is the best way of forcing a container box enclose its floats? clear:both is not good, because it would make the cleared element below all previous floats. It's inappropriate on a column setup layout. I also tested overflow:auto, but in many times an annoying scroll bar appears. How about overflow:hidden, it's the best way? Thanks. __ css-discuss [EMAIL PROTECTED] 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] Is overflow:hidden the best?
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] On Behalf Of ray Sent: Wednesday, November 05, 2008 7:01 AM To: css-d@lists.css-discuss.org Subject: [css-d] Is overflow:hidden the best? Hi, all What is the best way of forcing a container box enclose its floats? clear:both is not good, because it would make the cleared element below all previous floats. It's inappropriate on a column setup layout. I also tested overflow:auto, but in many times an annoying scroll bar appears. How about overflow:hidden, it's the best way? I don't know if it is the best way, but it is not enough, as for IE you need hasLayout. This article discusses a few different ways to contain floats: http://www.tjkdesign.com/articles/clearing-floats_and_block-formatting_conte xt.asp The demo is here: http://www.tjkdesign.com/articles/block-formatting_context/newBFC.asp -- Regards, Thierry | http://www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] 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] Is overflow:hidden the best?
I know this way. But it is not appropriate for the columns layout(one or all are float columns), because the cleared element would stay below ALL previous floats. This problem is mentioned at the bottom of that page(easy clearing). Thanks for your reply. On Wed, Nov 5, 2008 at 11:12 PM, Serge Krul [EMAIL PROTECTED] wrote: Hi, What is the best way of forcing a container box enclose its floats? From my experience the best way is to use the easy clearinghttp://www.positioniseverything.net/easyclearing.html technique. It's far more stable than overflow:auto, and overflow:hidden is not suitable in most cases (for example you wouldn't want your horizontal menu to hide some of your list items when text size is increased). Serge Krul __ css-discuss [EMAIL PROTECTED] 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] Is overflow:hidden the best?
On Wed, Nov 5, 2008 at 11:12 PM, Serge Krul [EMAIL PROTECTED] wrote: Hi, What is the best way of forcing a container box enclose its floats? From my experience the best way is to use the easy clearinghttp://www.positioniseverything.net/easyclearing.html technique. It's far more stable than overflow:auto, and overflow:hidden is not suitable in most cases (for example you wouldn't want your horizontal menu to hide some of your list items when text size is increased). fwiw, I don't agree. The problem with the easy clearing method is that it styles the element differently depending on browsers. To understand the issue, check example #2 (The .clearfix method) on my demo page: http://www.tjkdesign.com/articles/block-formatting_context/newBFC.asp -- Regards, Thierry | http://www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] 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] Is overflow:hidden the best?
Yeah, I can see the problem. But in most cases we would set a left margin on the content div to reserve space for the left column, so this issue may not that important. I think the big problem of this clearing way is that the cleared element would stay below *All* previous floats, see this demo: http://fouragency.co.uk/test.html You can see the yellow box of content div extends to below the left sidebar, instead of just enclosing the text and the float within its content. Thanks On Thu, Nov 6, 2008 at 10:38 AM, Thierry Koblentz [EMAIL PROTECTED] wrote: On Wed, Nov 5, 2008 at 11:12 PM, Serge Krul [EMAIL PROTECTED] wrote: Hi, What is the best way of forcing a container box enclose its floats? From my experience the best way is to use the easy clearinghttp://www.positioniseverything.net/easyclearing.html technique. It's far more stable than overflow:auto, and overflow:hidden is not suitable in most cases (for example you wouldn't want your horizontal menu to hide some of your list items when text size is increased). fwiw, I don't agree. The problem with the easy clearing method is that it styles the element differently depending on browsers. To understand the issue, check example #2 (The .clearfix method) on my demo page: http://www.tjkdesign.com/articles/block-formatting_context/newBFC.asp -- Regards, Thierry | http://www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] 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] Is overflow:hidden the best?
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] On Behalf Of ray Sent: Wednesday, November 05, 2008 7:51 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Is overflow:hidden the best? Yeah, I can see the problem. But in most cases we would set a left margin on the content div to reserve space for the left column, so this issue may not that important. I think the big problem of this clearing way is that the cleared element would stay below *All* previous floats, see this demo: http://fouragency.co.uk/test.html You can see the yellow box of content div extends to below the left sidebar, instead of just enclosing the text and the float within its content. Isn't the exact same example I pointed you to when explaining the issue with this method? ;) -- Regards, Thierry | http://www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] 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] Is overflow:hidden the best?
ray wrote: Yeah, I can see the problem. But in most cases we would set a left margin on the content div to reserve space for the left column, so this issue may not that important. We would..? I would hardly ever do that... Sorry, but I see no point in looking for the best overall method, since every single method put restrictions on how one can lay out a design. Looking for the best method for one particular type of layout is another matter, but then the conditions are given and the restrictions accepted. If the overflow: hidden method works for your case(s), then it is probably fine to use it there. The overflow: hidden method rarely ever works for me, since I'm almost always placing content-elements over the edge of containers. Hate to see those cut off, or having to restrict my positioning to inside containers. I have to agree with Thierry in that the easy clearing method is more adaptable and places fewer restrictions on layout. In most cases I use float to contain floats though, clear these container-floats with existing content, and keep the easy clearing in reserve. The best approach is to know all available methods in depth, so one can choose the one that works best in each case. One may even have to spread several methods around in one layout in order to avoid standardized restrictions - not to mention browser-bugs. 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is overflow:hidden the best?
No, I overwritten it, just the same name. :) On Thu, Nov 6, 2008 at 12:38 PM, Thierry Koblentz [EMAIL PROTECTED] wrote: -Original Message- From: [EMAIL PROTECTED] [mailto: [EMAIL PROTECTED] discuss.org] On Behalf Of ray Sent: Wednesday, November 05, 2008 7:51 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Is overflow:hidden the best? Yeah, I can see the problem. But in most cases we would set a left margin on the content div to reserve space for the left column, so this issue may not that important. I think the big problem of this clearing way is that the cleared element would stay below *All* previous floats, see this demo: http://fouragency.co.uk/test.html You can see the yellow box of content div extends to below the left sidebar, instead of just enclosing the text and the float within its content. Isn't the exact same example I pointed you to when explaining the issue with this method? ;) -- Regards, Thierry | http://www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] 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/
