Float and Shrinkwrap
in [CSS]
|
Prev: fixed height.
Next: Newbie layout/positioning problem
From: dorayme on 7 Apr 2008 17:46 In article <NpydnewRWJVRs2fanZ2dnUVZ_rmjnZ2d(a)golden.net>, Gus Richter <gusrichter(a)netscape.net> wrote: > dorayme wrote: > > > > I guess we have been through a few of these things earlier. I put up an .... > I have no > problem with your examples as in: > <http://netweaver.com.au/alt/visibleOrder.html> which I think present > the same thing from a slightly different visual view. > > > I am inclined to actually use the phrase "containing block" where the > > context shows it to do a job of containing. Your containing blocks don't > > contain anything obvious (except their own text or pictures, a sense in > > which most elements are containers). > > The "containing block" is each one of the yellow boxes in every one of > your examples on the page linked above (yellow boxes in my examples as > well). Yes, I was gathering that. > It is a bit counter-intuitive in that normally a container comes > first in the markup, but in the case with floats, the "container block" > comes _after_ the float. I think it is counter intuitive talk because it is not containing the elements we are interested in as children. > The "container block" contains the float ... [this "container"] > is an auto-creation by the > appearance of a float - a special feature of the float. I am seeing what you are referring to fine, but it looks like a confusing way of expressing the facts. In fact, it looks like a slight misunderstanding. The float is *not* contained by what you are calling a "container" except in the most superficial way. If you actually use some the positioning facilities in css available (either on the float via margins or on the rel pos'd div, you will see this. It is just an accident of the conditions that that they seem so intimate! They are independent beings with complex relations! That's how I see it, anyway. See the bottom of the page now at <http://netweaver.com.au/alt/visibleOrder.html> Btw, notice how the float and/or the rel pos'd div behave in the last two examples. In the one the float does not exert its magic pushing of the contents in the following div, while in the other it still does even though the div is way clear in appearance. Of course, it is just the appearance. As if float still thinks the div is where it was before it was offset and thinks the div is an appropriate object to cast its spell on (the spell being the float rules that push content aside in non-floats). All this is reasonably clear from the float rules and the nature of rel positioning. It is a wonderful world of magic! I say we must pay due reverence to it with careful terminology that seeks to talk of the deeper underlying structures. As for the particular business of visual layering, I will have more to say on this later. It is an absolutely abominable scheme even though it is easy enough to get about it in a practical way. Even to learn 'the rules'. I definitely don't think the authors of the visual layering model in CSS have created a wonder of the world. It may well be that the task was so difficult that only abominations were practical. > > I wanted to answer some more to other points below, but have run out of > time. Must do other things today. The meat is in the above anyway. I > like your examples. No worries. I will just get a slab[1] of beers from the fridge and get rotten drunk to pass the time till you get back from work. ------------- 1. A slab of beers in Australia is a cardboard pack of 24 tinnies. These are half the size of long-necks (750 ml). -- dorayme
From: Gus Richter on 8 Apr 2008 00:32 dorayme wrote: > > I am seeing what you are referring to fine, but it looks like a > confusing way of expressing the facts. In fact, it looks like a slight > misunderstanding. The float is *not* contained by what you are calling a > "container" except in the most superficial way. Not sure if this will convince you away from the dark side, but try at the end in the link below: <img src="pics/floatA.jpg" alt="" height="50" width="75" style="float:left;">Text following. <div style="clear:both;margin-bottom:50px;"></div> <img src="pics/floatA.jpg" alt="" height="50" width="75" style="float:left;"><p>Text following.</p> <div style="clear:both;margin-bottom:50px;"></div> <p><img src="pics/floatA.jpg" alt="" height="50" width="75" style="float:left;">Text following.</p> <div style="clear:both;margin-bottom:50px;"></div> Then try it with divs. Then try positioning the divs. Prelim tests show that there appear to be differences comparing those to these three. All have the _same_ "containing block". Hope you enjoy the new thing I've introduced here. ;-) > <http://netweaver.com.au/alt/visibleOrder.html> > > Btw, notice how the float and/or the rel pos'd div behave in the last > two examples. In the one the float does not exert its magic pushing of > the contents in the following div, while in the other it still does even > though the div is way clear in appearance. This is because in the one instance you displace the float and the real estate it had occupied before is retained. In the other you displace the containing block and the inline box content in the containing block does not have to shift over to make room for the float which is no longer in the way. > No worries. I will just get a slab[1] of beers from the fridge and get > rotten drunk to pass the time till you get back from work. Heard about you Aussies. LOL. Used to have ads on TV here for Fosters Beer. -- Gus
From: Gus Richter on 8 Apr 2008 00:44 dorayme wrote: > > I am inclined to actually use the phrase "containing block" where the > context shows it to do a job of containing. > > Because the point is that it is the container, the parent, the big house > where the children live... It is crucial that it is on the container, > the parent, that rel pos is made for the abs to work. > > And I find it interesting how the "layers" work and yet the float still > exerts the influence to push aside (displace) the text or pics in the > following divs. Just had never thought of the float rules operating from > a smothered "underneath" position! Those float rules are powerful voodoo > huh? <g> 1. Any floated item will be out of the normal flow. 2. When floated left, it will position itself to top,left (0,0) of its "container block". 3. The special feature of a float is that any inline box content in the "container box" will shift over to make room for the float. 4. Blah, blah, blah, blah. 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?" -- Gus
From: dorayme on 8 Apr 2008 00:50 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 ? > 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. -- dorayme
From: rf on 8 Apr 2008 00:57
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. -- Richard Killing all threads involving google groups The Usenet Improvement Project: http://improve-usenet.org |