Float and Shrinkwrap
in [CSS]
|
Prev: fixed height.
Next: Newbie layout/positioning problem
From: Gus Richter on 8 Apr 2008 01:15 rf wrote: > Gus Richter <gusrichter(a)netscape.net> wrote in > news:WoOdnYR9Y7aBZWfanZ2dnUVZ_gKdnZ2d(a)golden.net: > >> 2. When floated left, it will position itself to top,left (0,0) of its >> "container block". > > http://www.w3.org/TR/CSS21/visuren.html#floats > > When floated left it will be shifted to the left until its outer edge > touches the containing block edge or the outer edge of another float. If > there is a line box the top of the floated box is aligned with the top of > the current line box. This will usually not be the top of the container > block. Funny thing is that when I read it, it says: A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there's a line box, the top of the floated box is aligned with the top of the current line box. What makes you add the last sentence in your quote? -- Gus
From: dorayme on 8 Apr 2008 01:23 In article <WoOdnYR9Y7aBZWfanZ2dnUVZ_gKdnZ2d(a)golden.net>, Gus Richter <gusrichter(a)netscape.net> wrote: > dorayme wrote: > > > > I am inclined to actually use the phrase "containing block" where the > > context shows it to do a job of containing. > > In the float rules you refer to, the idea of containment, as I have been thinking about it, refers to a parent in a particular set up (much like some of your examples with wrappers). You seem to favour the container word to refer to the following (html order) sibling after the float. > You are having difficulty in accepting the container thing, so try > asking yourself: > "If the float positions itself to 0,0 of the container block, > then what could be the container block?" I was rather hoping to have made that clear (at least to myself) in the early pages of <http://netweaver.com.au/floatHouse/> <g> Anyway, Gus, thanks for raising this business. You would probably be surprised if you knew what in all of this I am interested in. It has to do with my previous point about predictability and human readability of the rules. I don't think I can get this across. My fault for sure. Cheers. -- dorayme
From: Gus Richter on 8 Apr 2008 01:28 dorayme wrote: > In article <ScudnU3ayMXRaGfanZ2dnUVZ_gadnZ2d(a)golden.net>, > Gus Richter <gusrichter(a)netscape.net> wrote: > >> Not sure if this will convince you away from the dark side > > ? I guess you're too young to remember Star Wars. >> This is because in the one instance you displace the float and the >> real estate it had occupied before is retained. > > I was not the least puzzled by the examples at the end. They were not > offered as something to be explained but to make a point about > terminology. Sorry, but "this is reasonably clear" made me think otherwise. -- Gus
From: rf on 8 Apr 2008 01:32 Gus Richter <gusrichter(a)netscape.net> wrote in news:mtmdnc-aIeb5YmfanZ2dnUVZ_hadnZ2d(a)golden.net: > rf wrote: >> Gus Richter <gusrichter(a)netscape.net> wrote in >> news:WoOdnYR9Y7aBZWfanZ2dnUVZ_gKdnZ2d(a)golden.net: >> >>> 2. When floated left, it will position itself to top,left (0,0) of >>> its "container block". >> >> http://www.w3.org/TR/CSS21/visuren.html#floats >> >> When floated left it will be shifted to the left until its outer edge >> touches the containing block edge or the outer edge of another float. >> If there is a line box the top of the floated box is aligned with the >> top of the current line box. This will usually not be the top of the >> container block. > > Funny thing is that when I read it, it says: > A floated box is shifted to the left or right until its outer edge > touches the containing block edge or the outer edge of another > float. If there's a line box, the top of the floated box is aligned > with the top of the current line box. > > What makes you add the last sentence in your quote? The quoted, or rather restated, text is incomplete and therefore misleading. I added that last sentence to clarify matters. <body> <p> a very long paragraph that causes lots of line boxes to be generated a very long paragraph that causes lots of line boxes to be generated a very long paragraph that causes lots of line boxes to be generated a very long paragraph that causes lots of line boxes to be generated a very long paragraph that causes lots of line boxes to be generated a very long paragraph that causes lots of line boxes to be generated a very long paragraph that causes lots of line boxes to be generated a very long paragraph that causes lots of line boxes to be generated a very long paragraph that causes lots of line boxes to be generated the last text before the image <img src=... style='float: left'> a bit more text </p> </body> There will be quite a number of line boxes before the image is encountered. The image will be floated to the left of the containing block but the top of the image will be aligned with the top of the line box that contains the text 'the last text before the image' or thereabouts, depending on how the text is wrapped. This is nowhere near the top of the containing box. If you follow the above link and then scroll down a bit you will find an illustration where a floated element overlaps two paragraphs. The caption is "A floating image obscures borders ..." Note that the top of the floated element is not at the top of the first paragraph. It is at the top of the second line block. Look closely at the text, looking for the (X). -- Richard Killing all threads involving google groups The Usenet Improvement Project: http://improve-usenet.org
From: Gus Richter on 8 Apr 2008 01:40
dorayme wrote: > > In the float rules you refer to, the idea of containment, as I have been > thinking about it, refers to a parent in a particular set up (much like > some of your examples with wrappers). You seem to favour the container > word to refer to the following (html order) sibling after the float. I use the term "container block" because it is the one used in the specs. I mentioned in an earlier post that I think of it more as "float box" because it is a special thing just for floats. You wish to see it in the more conventional way of something inside a "container" as in a non-float situation. Please try the latest that I posted right after mentioning the "dark side". They are constructed in the conventional way. -- Gus |