 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / August 2007Trying to understand overflow:hidden
Hi I'm trying to understand the overflow property. The following was suggested as a solution to a previous issue I had http://www.quirksmode.org/css/clearing.html This works (section: The New Solution) but I don't understand why. According to: http://www.w3.org/TR/REC-CSS2/visufx.html 11.1.1 Overflow: the 'overflow' property ... hidden This value indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region; users will not have access to clipped content... ... If I have the following code. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>overflow</title> <style> #outer{ padding:5px; border: 1px solid rgb(255,0,0); width:600px; } #innerleft{ float:left; padding:5px; border: 1px solid rgb(0,255,0); width:200px; } #innerright{ float:right; padding:5px; border: 1px solid rgb(0,0,255); width:300px; } </style> </head> <body> <div id='outer'> <div id='innerleft'>content</div> <div id='innerright'>content</div> </div> </body> </html> I understand why the outer div is rendered as a solid line(with padding) with the floaters rendered below ... because the outer div has no content apparently. If I simply add overflow:hidden to outer and reload the page the border for outer extends below the two floating divs, Previously, outer had no content, now apparently it does. I'm confused. I think it might have something to do with the clip attribute but this behavoiur doesn't seem to follow [my understanding of] the spec at all. I won't deny I'm struggling to understand the spec. Rgds Duncan > If I simply add overflow:hidden to outer and reload the page > the border for outer extends below the two floating divs, Previously, > outer had no content, now apparently it does. I'm confused. I think it > might have something to do with the clip attribute but this behavoiur > doesn't seem to follow [my understanding of] the spec at all. For future reference, the most confusing and important part of the spec is probably §10 Visual formatting model details. That is the part that actually tells you how to compute values. By default, the overflow property is 'visible'. Relevant section: §10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' (helpful title!) [ ... ] Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset). When overflow is set to hidden, the height computation changes to §10.6.7 'Auto' heights for block formatting context roots [ ... ] In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. > I won't deny I'm struggling to understand the spec. The hardest parts of the spec are trying to figure out which section to look at (sections §8-§11 all deal with the formatting model but §10 is probably the most relevant for problems, as it is the most confusing). I would also say that the CSS spec is the most difficult-to-understand spec I've ever read.  SignatureBeware of bugs in the above code; I have only proved it correct, not tried it. -- Donald E. Knuth >> If I simply add overflow:hidden to outer and reload the page > I would also say that the CSS spec is the most difficult-to-understand > spec I've ever read. Well it's certainly confusing the heck out of me that's for sure. Thanks for all the pointers Rgds Duncan >>> If I simply add overflow:hidden to outer and reload the page > [quoted text clipped - 7 lines] > Rgds > Duncan In addition, you might want to look at the CSS 3 basic box model WD. (http://www.w3.org/TR/2007/WD-css3-box-20070809/) Some of it is not relevant, but it does put everything in the same place and also makes §10 of CSS 2.1 somewhat easier to follow. SignatureBeware of bugs in the above code; I have only proved it correct, not tried it. -- Donald E. Knuth .oO(lyallex) >The following was suggested as a solution to a previous issue I had > [quoted text clipped - 9 lines] >with the floaters rendered below ... because the outer div has no >content apparently. Correct, the floated elements are taken out of the normal flow, hence the outer box doesn't have any content anymore. >If I simply add overflow:hidden to outer and reload the page >the border for outer extends below the two floating divs, Previously, >outer had no content, now apparently it does. Correct. In some cases an element establishes a new so called "block-formatting context": 9.4.1 Block formatting contexts http://www.w3.org/TR/CSS21/visuren.html#block-formatting (especially the first paragraph) The height of such a box is calculated as described in 10.6.7 'Auto' heights for block formatting context roots http://www.w3.org/TR/CSS21/visudet.html#root-height (especially the last paragraph) That's it. ;) OK, it's a bit more complicated, but these two sections are the most relevant when describing the "confusing" behaviour. Micha > .oO(lyallex) > >> The following was suggested as a solution to a previous issue I had > That's it. ;) OK, it's a bit more complicated, but these two sections > are the most relevant when describing the "confusing" behaviour. > > Micha Some of you guys are really getting your heads around this stuff.. It does give me hope that after many many readings I might start to get the hang of it too. Gimme the Tomcat docs any day :-) Cheers Duncan > Hi > [quoted text clipped - 5 lines] > > This works (section: The New Solution) but I don't understand why. I bow to the two respondents, but wish to comment about the referenced site. It mentions 3 methods: 1. The clearing DIV. 2. The :after pseudo-class 3. The overflow property Item 2. was mentioned on the site but no example given, probably because it is not that obvious as to how it may be accomplished by only saying: This can be done either by adding the extra element in the HTML source code (by adding a Clearing DIV as in method 1.) or by using the :after pseudo-class to generate it. Well I have been unable to use :after to generate a DIV (nor ::after). In fact, I see no example of anything similar in the Specs. The closest, and working, way is to use: #outer:after {content: " "; display:block; height:0; clear:both;} SignatureGus I think option 2 is a waste of time, because it doesn't work on IE. I'll take practicality over standards anyday. Cheers, Chris http://webdevfu.com > I think option 2 is a waste of time, because it doesn't work on IE. > I'll take practicality over standards anyday. It's much worse than that... A lot of sites have started using that "clearfix" thing recently (using :after to insert a "." that's display: block, visibility: hidden and clear: both at the end of a float). I think the idea is that IE under certain circumstances incorrectly makes the height of floats include the height of descendent floats anyway, and blithely ignores the :after stuff altogether. I prefer overflow: hidden to initiate a new block formatting context if it's needed to make floats grow in height to include descendent floats. But I have no idea what that does in IE. Either nothing or the wrong thing probably. .oO(Ben C) >I prefer overflow: hidden to initiate a new block formatting context if >it's needed to make floats grow in height to include descendent floats. >But I have no idea what that does in IE. Either nothing or the wrong >thing probably. IE (at least v6) requires an additional "height: 1%" or something like that to make the "overflow: hidden" work as expected. Just a typical IE problem with the floats. Micha > .oO(Ben C) > [quoted text clipped - 6 lines] > that to make the "overflow: hidden" work as expected. Just a typical IE > problem with the floats. Chris says that Option 2 does not work in IE. Michael says that IE (at least v6) also needs "height: 1%" for overflow:hidden" to work. Ben is noncommital regarding IE other than to say that "under certain circumstances ...". The site: <http://www.quirksmode.org/css/clearing.html> indicates that IE also needs one of the three methods. I on the other hand find that the example provided by the OP or that on the site (in either Quirks or Standards) has the "unexpected/undesired" result only in Fx and requires one of the three methods. In IE6 and IE7 the container height expands/contracts with that of the largest float w/o any of the 3 methods applied and when applied for Fx needs, IE remains unchanged. How is it that we are at opposites? Did I misunderstand something somewhere or did everyone else? SignatureGus >> .oO(Ben C) >> [quoted text clipped - 21 lines] > w/o any of the 3 methods applied and when applied for Fx needs, IE > remains unchanged. That was roughly what I thought it did. It expands the container (incorrectly) anyway, but ignores :after. Firefox correctly groks the :after, puts in the clearing element which it correctly needs to expand the container, and so ends up with a similar final result. But I don't really know for sure what IE does apart from what I guess and overhear since I refuse to actually run it. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.